<!DOCTYPE html>












  


<html class="theme-next muse use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">






  
  
    
      
    
    
      
    
  <script src="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-flash.min.css" rel="stylesheet">



<script>
    (function () {
        if ('') {
            if (prompt('请输入文章密码') !== '') {
                alert('密码错误！');
                if (history.length === 1) {
                    location.replace("http://xxxxxxx.xxx"); // 这里替换成你的首页
                } else {
                    history.back();
                }
            }
        }
    })();
</script>





<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">



  <meta name="google-site-verification" content="zrNUWIf25v2J4dC1wliso_DUXEwYoECv4j3h9CE34xM">








  <meta name="baidu-site-verification" content="nuHze5uXZ7">







  
  
    
  
  <link href="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet" type="text/css">




  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  

  
    
      
    

    
  

  
    
    
    <link href="https://fonts.cat.net/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Roboto Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






  

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">




<link href="/css/main.css?v=6.4.2" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=6.4.2">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.ico?v=6.4.2">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=6.4.2">


  <link rel="mask-icon" href="/images/logo.svg?v=6.4.2" color="#222">









<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '6.4.2',
    sidebar: {"position":"left","display":"always","offset":12,"b2t":false,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="“之前安装了Hexo+NexT 5.X，并部署在githubpage上，前两天把NexT主题升级到6.X版本，网上搜索各路大神的帖子，对博客做了大量优化和美华，进行了一些设置，在此记录下来。作为备忘，也方便他人查阅。”">
<meta name="keywords" content="next,优化,github,hexo">
<meta property="og:type" content="article">
<meta property="og:title" content="本博客Hexo NexT GitHubPages优化">
<meta property="og:url" content="https://blog.codenote.pro/this-blog-hexo-next-githubpages-optimization.html">
<meta property="og:site_name" content="九阳的笔记本">
<meta property="og:description" content="“之前安装了Hexo+NexT 5.X，并部署在githubpage上，前两天把NexT主题升级到6.X版本，网上搜索各路大神的帖子，对博客做了大量优化和美华，进行了一些设置，在此记录下来。作为备忘，也方便他人查阅。”">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://qn.codenote.pro/2018-10-05-22-24-19.png">
<meta property="og:image" content="http://qn.codenote.pro/2018-10-05-23-56-43.gif">
<meta property="og:image" content="http://qn.codenote.pro/2018-10-06-00-25-42.jpg">
<meta property="og:image" content="https://codenote.oss-cn-beijing.aliyuncs.com/screenshot.png">
<meta property="og:image" content="https://codenote.oss-cn-beijing.aliyuncs.com/css.gif">
<meta property="og:image" content="https://codenote.oss-cn-beijing.aliyuncs.com/google-analytics.png">
<meta property="og:updated_time" content="2018-11-02T15:40:47.372Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="本博客Hexo NexT GitHubPages优化">
<meta name="twitter:description" content="“之前安装了Hexo+NexT 5.X，并部署在githubpage上，前两天把NexT主题升级到6.X版本，网上搜索各路大神的帖子，对博客做了大量优化和美华，进行了一些设置，在此记录下来。作为备忘，也方便他人查阅。”">
<meta name="twitter:image" content="http://qn.codenote.pro/2018-10-05-22-24-19.png">



  <link rel="alternate" href="/atom.xml" title="九阳的笔记本" type="application/atom+xml">




  <link rel="canonical" href="https://blog.codenote.pro/this-blog-hexo-next-githubpages-optimization.html">



<script type="text/javascript" id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>本博客Hexo NexT GitHubPages优化 | 九阳的笔记本</title>
  




<script async src="https://www.googletagmanager.com/gtag/js?id=UA-126970002-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-126970002-1');
</script>



  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?07b2f6778635ec267ee2b4753e118da9";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style type="text/css">
    .use-motion .motion-element,
    .use-motion .brand,
    .use-motion .menu-item,
    .sidebar-inner,
    .use-motion .post-block,
    .use-motion .pagination,
    .use-motion .comments,
    .use-motion .post-header,
    .use-motion .post-body,
    .use-motion .collection-title { opacity: initial; }

    .use-motion .logo,
    .use-motion .site-title,
    .use-motion .site-subtitle {
      opacity: initial;
      top: initial;
    }

    .use-motion {
      .logo-line-before i { left: initial; }
      .logo-line-after i { right: initial; }
    }
  </style>
</noscript>

</head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>
     
    
    
    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">九阳的笔记本</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-home">
    <a href="/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-hexo">
    <a href="/categories/Hexo" rel="section">
      <i class="menu-item-icon fa fa-fw fa-header"></i> <br>Hexo</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-linux">
    <a href="/categories/Linux" rel="section">
      <i class="menu-item-icon fa fa-fw fa-linux"></i> <br>Linux</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-docker">
    <a href="/categories/docker" rel="section">
      <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>docker</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-learn">
    <a href="/categories/learn" rel="section">
      <i class="menu-item-icon fa fa-fw fa-leanpub"></i> <br>学习</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-categories">
    <a href="/categories/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-tags">
    <a href="/tags/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-archives">
    <a href="/archives/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-top">
    <a href="/top/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-signal"></i> <br>阅读排行</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-sitemap">
    <a href="/sitemap.xml" rel="section">
      <i class="menu-item-icon fa fa-fw fa-sitemap"></i> <br>站点地图</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-about">
    <a href="/about/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-user"></i> <br>关于</a>
  </li>

      
      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br>搜索</a>
        </li>
      
    </ul>
  

  
    

  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="搜索..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



  



</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  
    
  

  

  <article class="post post-type-normal post-sticky" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.codenote.pro/this-blog-hexo-next-githubpages-optimization.html">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="yszar">
      <meta itemprop="description" content="学无止境！">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="九阳的笔记本">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">本博客Hexo NexT GitHubPages优化
              
            
          </h2>
        

        <div class="post-meta">
          <span class="post-time">

            
            
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              

              
                
              

              <time title="创建时间：2018-10-05 03:15:35" itemprop="dateCreated datePublished" datetime="2018-10-05T03:15:35+08:00">2018-10-05</time>
            

            
              

              
                
                <span class="post-meta-divider">|</span>
                

                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                
                  <span class="post-meta-item-text">更新于</span>
                
                <time title="修改时间：2018-11-02 23:40:47" itemprop="dateModified" datetime="2018-11-02T23:40:47+08:00">2018-11-02</time>
              
            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing"><a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a></span>

                
                
              
            </span>
          

          
            
          

          
          
             <span id="/this-blog-hexo-next-githubpages-optimization.html" class="leancloud_visitors" data-flag-title="本博客Hexo NexT GitHubPages优化">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数：</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          
              <div class="post-description">“之前安装了Hexo+NexT 5.X，并部署在githubpage上，前两天把NexT主题升级到6.X版本，网上搜索各路大神的帖子，对博客做了大量优化和美华，进行了一些设置，在此记录下来。作为备忘，也方便他人查阅。”</div>
          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p class="description">之前安装了Hexo+NexT 5.X，并部署在githubpage上，前两天把NexT主题升级到6.X版本，网上搜索各路大神的帖子，对博客做了大量优化和美华，进行了一些设置，在此记录下来。作为备忘，也方便他人查阅。</p>

<a id="more"></a>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><div class="note success no-icon"><p>2018年10月07日 评论系统由Valine改为gitalk</p></div>

<h3 id="我的本地环境"><a href="#我的本地环境" class="headerlink" title="我的本地环境"></a>我的本地环境</h3><figure class="highlight js"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div></pre></div><div class="code"><pre><div class="line"><span class="comment">/* 调试所用浏览器 */</span></div><div class="line">Google Chrome 版本 <span class="number">69.0</span><span class="number">.3497</span><span class="number">.100</span>（正式版本） （<span class="number">64</span> 位）</div><div class="line"></div><div class="line"><span class="comment">/* 版本信息 */</span></div><div class="line"># apple @ AppledeMacBook-Air in ~/yszar.github.io</div><div class="line">$ hexo v</div><div class="line">INFO  [hexo-math] Using engine <span class="string">'mathjax'</span></div><div class="line">hexo: <span class="number">3.7</span><span class="number">.1</span></div><div class="line">hexo-cli: <span class="number">1.1</span><span class="number">.0</span></div><div class="line">os: Darwin <span class="number">17.4</span><span class="number">.0</span> darwin x64</div><div class="line">http_parser: <span class="number">2.8</span><span class="number">.0</span></div><div class="line">node: <span class="number">8.12</span><span class="number">.0</span></div><div class="line">v8: <span class="number">6.2</span><span class="number">.414</span><span class="number">.66</span></div><div class="line">uv: <span class="number">1.19</span><span class="number">.2</span></div><div class="line">zlib: <span class="number">1.2</span><span class="number">.11</span></div><div class="line">ares: <span class="number">1.10</span><span class="number">.1</span>-DEV</div><div class="line">modules: <span class="number">57</span></div><div class="line">nghttp2: <span class="number">1.32</span><span class="number">.0</span></div><div class="line">napi: <span class="number">3</span></div><div class="line">openssl: <span class="number">1.0</span><span class="number">.2</span>p</div><div class="line">icu: <span class="number">60.1</span></div><div class="line">unicode: <span class="number">10.0</span></div><div class="line">cldr: <span class="number">32.0</span></div><div class="line">tz: <span class="number">2017</span>c</div><div class="line"></div><div class="line"># apple @ AppledeMacBook-Air in ~/yszar.github.io</div><div class="line">$ cat package.json</div><div class="line">&#123;</div><div class="line">  <span class="string">"name"</span>: <span class="string">"hexo-site"</span>,</div><div class="line">  <span class="string">"version"</span>: <span class="string">"0.0.0"</span>,</div><div class="line">  <span class="string">"private"</span>: <span class="literal">true</span>,</div><div class="line">  <span class="string">"hexo"</span>: &#123;</div><div class="line">    <span class="string">"version"</span>: <span class="string">"3.7.1"</span></div><div class="line">  &#125;,</div><div class="line">  <span class="string">"dependencies"</span>: &#123;</div><div class="line">    <span class="string">"aplayer"</span>: <span class="string">"^1.10.1"</span>, <span class="comment">/* 播放插件 */</span></div><div class="line">    <span class="string">"bcrypt"</span>: <span class="string">"^3.0.1"</span>,</div><div class="line">    <span class="string">"gulp"</span>: <span class="string">"^3.9.1"</span>, <span class="comment">/* 压缩代码 */</span></div><div class="line">    <span class="string">"gulp-htmlclean"</span>: <span class="string">"^2.7.22"</span>, <span class="comment">/* 压缩代码 */</span></div><div class="line">    <span class="string">"gulp-htmlmin"</span>: <span class="string">"^5.0.1"</span>, <span class="comment">/* 压缩代码 */</span></div><div class="line">    <span class="string">"gulp-imagemin"</span>: <span class="string">"^4.1.0"</span>, <span class="comment">/* 压缩图片 */</span></div><div class="line">    <span class="string">"gulp-minify-css"</span>: <span class="string">"^1.2.4"</span>, <span class="comment">/* 压缩代码 */</span></div><div class="line">    <span class="string">"gulp-uglify"</span>: <span class="string">"^3.0.1"</span>, <span class="comment">/* 压缩代码 */</span></div><div class="line">    <span class="string">"hexo"</span>: <span class="string">"^3.7.0"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-admin"</span>: <span class="string">"^2.3.0"</span>,</div><div class="line">    <span class="string">"hexo-autonofollow"</span>: <span class="string">"^1.0.1"</span>, <span class="comment">/* 自动为外链添加nofollow */</span></div><div class="line">    <span class="string">"hexo-deployer-git"</span>: <span class="string">"^0.3.1"</span>, <span class="comment">/* Git 部署工具 */</span></div><div class="line">    <span class="string">"hexo-deployer-heroku"</span>: <span class="string">"^0.1.2"</span>, <span class="comment">/* Heroku 部署工具 */</span></div><div class="line">    <span class="string">"hexo-fs"</span>: <span class="string">"^0.2.3"</span>,</div><div class="line">    <span class="string">"hexo-generator-archive"</span>: <span class="string">"^0.1.5"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-generator-baidu-sitemap"</span>: <span class="string">"^0.1.5"</span>, <span class="comment">/* 生成百度sitemap */</span></div><div class="line">    <span class="string">"hexo-generator-category"</span>: <span class="string">"^0.1.3"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-generator-feed"</span>: <span class="string">"^1.2.2"</span>, <span class="comment">/* RSS */</span></div><div class="line">    <span class="string">"hexo-generator-index-pin-top"</span>: <span class="string">"^0.2.2"</span>, <span class="comment">/* 替代默认安装的，支持文章置顶 */</span></div><div class="line">    <span class="string">"hexo-generator-searchdb"</span>: <span class="string">"^1.0.8"</span>, <span class="comment">/* 本地搜索 */</span></div><div class="line">    <span class="string">"hexo-generator-sitemap"</span>: <span class="string">"^1.2.0"</span>, <span class="comment">/* 生成 sitemap.xml，利于 SEO */</span></div><div class="line">    <span class="string">"hexo-generator-tag"</span>: <span class="string">"^0.2.0"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-inject"</span>: <span class="string">"^1.0.0"</span>, <span class="comment">/* 数学公式 */</span></div><div class="line">    <span class="string">"hexo-leancloud-counter-security"</span>: <span class="string">"^1.3.2"</span>, <span class="comment">/* 显示阅读数 */</span></div><div class="line">    <span class="string">"hexo-math"</span>: <span class="string">"^3.0.3"</span>, <span class="comment">/* 数学公式 */</span></div><div class="line">    <span class="string">"hexo-recommended-posts"</span>: <span class="string">"^1.0.3"</span>,</div><div class="line">    <span class="string">"hexo-renderer-ejs"</span>: <span class="string">"^0.3.1"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-renderer-marked"</span>: <span class="string">"^0.3.2"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-renderer-stylus"</span>: <span class="string">"^0.3.3"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-server"</span>: <span class="string">"^0.3.3"</span>, <span class="comment">/* 默认安装 */</span></div><div class="line">    <span class="string">"hexo-translate-title"</span>: <span class="string">"^1.0.10"</span>, <span class="comment">/* 翻译标题 */</span></div><div class="line">    <span class="string">"hexo-wordcount"</span>: <span class="string">"^6.0.1"</span> <span class="comment">/* 字数统计 */</span></div><div class="line">  &#125;</div><div class="line">&#125;</div><div class="line"><span class="comment">/*NexT主题版本*/</span></div><div class="line">version: <span class="number">6.4</span><span class="number">.2</span></div></pre></div></div></figure>
<h3 id="一些定义"><a href="#一些定义" class="headerlink" title="一些定义"></a>一些定义</h3><div class="note info"><p>站点配置文件和主题配置文件，名字都叫_config.yml，容易乱。</p></div>

<ul>
<li><span class="label info">站点配置文件</span>，位于站点文件夹根目录内：</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">~/blog/_config.yml</div></pre></div></div></figure>
<span class="label success">主题配置文件</span>，位于主题文件夹根目录内：<br><br><figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">~/blog/themes/next/_config.yml</div></pre></div></div></figure>
<h2 id="开始-搭建博客"><a href="#开始-搭建博客" class="headerlink" title="开始 搭建博客"></a>开始 搭建博客</h2><h3 id="在本地安装-Hexo"><a href="#在本地安装-Hexo" class="headerlink" title="在本地安装 Hexo"></a>在本地安装 Hexo</h3><p>搭建过程相对简单，而且网上资料比较多，推荐一些资料。</p>
<ul>
<li><a href="https://hexo.io/zh-cn/docs/" rel="external nofollow noopener noreferrer" target="_blank">官方文档</a></li>
<li>大佬的文章：<a href="https://zby.io/how-to-set-up-hexo-blog-on-linux.html" rel="external nofollow noopener noreferrer" target="_blank">在 Linux 服务器上搭建 Hexo：OS X、Windows 与 Linux 本地环境</a></li>
<li>小弟博客文章：<a href="https://yszar.github.io/github-and-hexo-build-blog.html" target="_blank" rel="noopener">GitHub和Hexo搭建博客
</a></li>
</ul>
<p>安装好 Hexo 后，先任意目录新建个文件夹，名字可以为 blog，然后进入这个文件夹，输入命令：</p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">hexo init</div></pre></div></div></figure>
<p>等一会，如果出现橙色的 <span class="label warning">WARN</span><br> 没关系，只要不出现红色的 <span class="label danger">ERROR</span><br>  就行。好了后，输入命令：</p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line">hexo g</div><div class="line"></div><div class="line">hexo s</div></pre></div></div></figure>
<p>然后点开 <a href="http://localhost:4000/" rel="external nofollow noopener noreferrer" target="_blank">http://localhost:4000/</a> ，恭喜你！已经在本地搭建好博客了,距离成功只差下一步——部署博客到 <span class="label default">GitHub Pages</span> 了～</p>
<h3 id="部署博客到-GitHub-Pages"><a href="#部署博客到-GitHub-Pages" class="headerlink" title="部署博客到 GitHub Pages"></a>部署博客到 GitHub Pages</h3><div class="note info no-icon"><p><span class="label default">GitHub Pages</span> 是开源协作社区 <span class="label default">GitHub</span> 的一个服务，将博客部署到它上面再合适不过了。<br></p></div>

<table>
<thead>
<tr>
<th style="text-align:left">问题</th>
<th style="text-align:left">解答</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">为什么要部署到 GitHub Pages 上？</td>
<td style="text-align:left">首先免费，其次省心，最后可以学习使用 GitHub。</td>
</tr>
<tr>
<td style="text-align:left">GitHub Pages 有容量限制吗？</td>
<td style="text-align:left">有，由 <a href="https://help.github.com/articles/what-is-github-pages/" rel="external nofollow noopener noreferrer" target="_blank">What is GitHub Pages?</a> 可知：大小限制为 1 GB，一个月 100 GB 流量。</td>
</tr>
<tr>
<td style="text-align:left">超出限制的容量怎么办？</td>
<td style="text-align:left">讲真，如果图片音乐视频等大文件都放在<a href="https://www.qiniu.com/" rel="external nofollow noopener noreferrer" target="_blank">七牛云 KODO</a>、<a href="https://www.aliyun.com/product/oss" rel="external nofollow noopener noreferrer" target="_blank">阿里云 OSS</a> 或其它云存储上，那么压根不用担心</td>
</tr>
<tr>
<td style="text-align:left">国内访问速度行不行，有必要同时部署在 Coding 上吗？</td>
<td style="text-align:left">个人感觉完全没必要，自己不用梯子时，感觉访问速度可以，毕竟站点的大文件都是放在了云存储上。</td>
</tr>
<tr>
<td style="text-align:left">我可以用自己的域名吗？</td>
<td style="text-align:left">可以，并且原生支持 https。</td>
</tr>
</tbody>
</table>
<p>注册 <span class="label default">GitHub</span> 帐号和创建 <span class="label default">Repository</span> 请查看这篇文章：<a href="http://yangbingdong.com/2017/build-blog-hexo-base/#GitHub" rel="external nofollow noopener noreferrer" target="_blank">基于Hexo+github+coding搭建个人博客——基础篇(从菜鸟到放弃)</a>，之后在<span class="label info">站点</span>文件夹根目录，安装 <span class="label default">Git</span> 部署插件（以后安装插件都先到这个目录），输入下面命令回车：</p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-deployer-git --save</div></pre></div></div></figure>
<p>然后，打开<span class="label info">站点</span>文件夹根目录下的 <span class="label info">站点配置文件</span> ，编辑：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># URL</span></div><div class="line"><span class="attr">url:</span> <span class="attr">https://reuixiy.github.io/</span></div><div class="line"><span class="string">.</span></div><div class="line"><span class="string">.</span></div><div class="line"><span class="string">.省略……</span></div><div class="line"><span class="string">.</span></div><div class="line"><span class="string">.</span></div><div class="line"><span class="comment"># Deployment</span></div><div class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></div><div class="line"><span class="attr">deploy:</span></div><div class="line"><span class="attr">-  type:</span></div><div class="line"><span class="string">+</span>  <span class="attr">type:</span> <span class="string">git</span></div><div class="line"><span class="string">+</span>  <span class="attr">repository:</span> <span class="attr">https://github.com/yszar/yszar.github.io.git</span></div><div class="line"><span class="string">+</span>  <span class="attr">branch:</span> <span class="string">master</span></div></pre></div></div></figure>
<p>将其中的 <span class="label default">reuixiy</span> 改成你的 <span class="label default">GitHub</span> 注册的帐号名就行，然后执行下面的命令：</p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line">hexo clean</div><div class="line"></div><div class="line">hexo g</div><div class="line"></div><div class="line">hexo d</div></pre></div></div></figure>
<p>输入你的 <span class="label default">GitHub</span> 的用户名和密码，成功后复制 <span class="label default">https://帐号名.github.io/</span> 到浏览器打开就行。看！这就是你的博客了，只要能连接到互联网，就能随时查看它！</p>
<p>当然，如果你不想每次都输入用户名和密码，不想每次更新时，在 <span class="label default">GitHub</span> 上显示 <span class="label default">invalid-email-address</span> ，可以按上面所提的那篇文章操作。</p>
<h3 id="更新提示（可以最后看）"><a href="#更新提示（可以最后看）" class="headerlink" title="更新提示（可以最后看）"></a>更新提示（可以最后看）</h3><p>更新会有不确定因素，即讨厌又麻烦，但是不更新又怎么能享受新功能呢expressionless……</p>
<h4 id="其它更新"><a href="#其它更新" class="headerlink" title="其它更新"></a>其它更新</h4><ul>
<li>npm 更新全局安装的包：</li>
</ul>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm update -g</div></pre></div></div></figure>
<ul>
<li>npm 更新站点文件夹根目录下安装的依赖包：</li>
</ul>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm update</div></pre></div></div></figure>
<ul>
<li>更新 npm 它自己：</li>
</ul>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install npm -g</div></pre></div></div></figure>
<ul>
<li>更新 Node.js 到最新版：</li>
</ul>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line">npm install n -g</div><div class="line"></div><div class="line">n latest</div></pre></div></div></figure>
<h4 id="更新主题"><a href="#更新主题" class="headerlink" title="更新主题"></a>更新主题</h4><p>进入<span class="label success">主题</span>文件夹根目录，然后 <span class="label default">git pull</span>，发现报错，怎么解决呢？可以先浏览<a href="http://www.01happy.com/git-resolve-conflicts/" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>，然后参考我的操作。</p>
<p>先到<span class="label success">主题</span>文件夹根目录：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">git pull</div></pre></div></div></figure>
<p>会发现报错，由于我们更改了相关文件，更新不成功，所以要将本地的所有修改先暂时存储起来：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">git stash</div></pre></div></div></figure>
<p>然后再试一下：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">git pull</div></pre></div></div></figure>
<p>可以了吧，接下来还原暂时存储的内容（即保存我们的所有修改）：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">git stash pop</div></pre></div></div></figure>
<p>如果报 <span class="label default">CONFLICT</span>，是因为 Git 无法确定一些改动，所以要我们手动解决文件中冲突的部分，这个比较麻烦，可以参考我下面的流程。</p>
<p>首先打开报<span class="label default">CONFLICT</span>的文件，<span class="label default">Ctrl + F</span> 搜索<span class="label default">>>>>>>> Stashed changes</span>，查看从此处到<span class="label default">=======</span>之间保存的代码，回忆一下自己当时更改了什么，是为了达到什么功能。</p>
<p>然后查看<span class="label default">=======</span>到<span class="label default"><<<<<<< Updated upstream</span>之间更新的代码，与下面保存的代码进行对比（也请浏览下所标出代码前后的代码）：</p>
<ol>
<li>如果改动较大，可能是主题增加了新功能，建议保留更新的代码，然后更改一下，达到自己想要在保存的代码中实现的功能，最后删除保存的代码。</li>
<li>如果改动较小，建议还是保留更新的代码，然后更改一下，最后删除保存的代码。</li>
</ol>
<div class="note warning"><p>要是自己不确定，一定记得将&lt;&lt;&lt;&lt;&lt;&lt;&lt; Updated upstream到&gt;&gt;&gt;&gt;&gt;&gt;&gt; Stashed changes之间的代码另存备份，然后进行调试，直到最后确定没有问题。</p></div>

<p>最后：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line"><span class="variable">$git</span> pull</div><div class="line">error: Pulling is not possible because you have unmerged files.</div><div class="line">hint: Fix them up <span class="keyword">in</span> the work tree, and <span class="keyword">then</span> use <span class="string">'git add/rm &lt;file&gt;'</span></div><div class="line">hint: as appropriate to mark resolution and make a commit.</div><div class="line">fatal: Exiting because of an unresolved conflict.</div></pre></div></div></figure>
<p>哇，又报错了，咋办？</p>
<p>先查看：<br><figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div></pre></div><div class="code"><pre><div class="line">$ git status</div><div class="line">On branch master</div><div class="line">Your branch is up to date with <span class="string">'origin/master'</span>.</div><div class="line"></div><div class="line">Changes to be committed:</div><div class="line">  (use <span class="string">"git reset HEAD &lt;file&gt;..."</span> to unstage)</div><div class="line"></div><div class="line">	modified:   layout/_custom/header.swig</div><div class="line">	modified:   layout/_custom/sidebar.swig</div><div class="line">	modified:   layout/_layout.swig</div><div class="line">	modified:   layout/category.swig</div><div class="line">	modified:   layout/tag.swig</div><div class="line">	modified:   <span class="built_in">source</span>/css/_common/components/post/post-meta.styl</div><div class="line">	modified:   <span class="built_in">source</span>/css/_common/components/post/post-nav.styl</div><div class="line">	modified:   <span class="built_in">source</span>/css/_common/scaffolding/base.styl</div><div class="line">	modified:   <span class="built_in">source</span>/css/_custom/custom.styl</div><div class="line">	deleted:    <span class="built_in">source</span>/images/avatar.gif</div><div class="line">	modified:   <span class="built_in">source</span>/lib/Han/dist/han.min.css</div><div class="line"></div><div class="line">Unmerged paths:</div><div class="line">  (use <span class="string">"git reset HEAD &lt;file&gt;..."</span> to unstage)</div><div class="line">  (use <span class="string">"git add &lt;file&gt;..."</span> to mark resolution)</div><div class="line"></div><div class="line">	both modified:   _config.yml</div><div class="line">	both modified:   languages/zh-Hans.yml</div><div class="line">	both modified:   layout/_macro/post-copyright.swig</div><div class="line">	both modified:   layout/_macro/post.swig</div><div class="line">	both modified:   layout/_macro/sidebar.swig</div><div class="line">	both modified:   layout/_partials/footer.swig</div><div class="line">	both modified:   layout/page.swig</div><div class="line">	both modified:   <span class="built_in">source</span>/css/_variables/base.styl</div><div class="line"></div><div class="line">Untracked files:</div><div class="line">  (use <span class="string">"git add &lt;file&gt;..."</span> to include <span class="keyword">in</span> what will be committed)</div><div class="line"></div><div class="line">	layout/_macro/passage-end-tag.swig</div><div class="line">	<span class="built_in">source</span>/js/src/love.js</div></pre></div></div></figure></p>
<p>看下面<span class="label default">Unmerged paths</span>，说<span class="label default">git reset HEAD <file>...</file></span>来取消修改（大概），<span class="label default">git add <file>...</file></span>来 mark 决定（大概），我们当然要保存这些文件的更改，所以：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">$ git add _config.yml languages/zh-Hans.yml layout/_macro/post-copyright.swig layout/_macro/post.swig layout/_macro/sidebar.swig layout/_partials/footer.swig layout/page.swig <span class="built_in">source</span>/css/_variables/base.styl layout/_macro/passage-end-tag.swig <span class="built_in">source</span>/js/src/love.js</div></pre></div></div></figure>
<p>顺便把新加的<span class="label default">passage-end-tag.swig</span>和<span class="label default">love.js</span>也加进去，最后再来试一下吧：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/next/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line">$ git pull</div><div class="line">Already up to date.</div></pre></div></div></figure>
<p>哇，成功更新主题！</p>
<div class="note warning"><p>注意：更新有风险，一定要谨慎处理文件中冲突的部分！</p></div><br><div class="note info"><p>另外：如果更新 NexT 主题后，配置文件有些新功能不会配置，可以查看 <a href="https://github.com/iissnan/hexo-theme-next/releases" rel="external nofollow noopener noreferrer" target="_blank">Releases</a> 页面，去里面找说明。</p></div>

<h2 id="优化-基本功能配置"><a href="#优化-基本功能配置" class="headerlink" title="优化 基本功能配置"></a>优化 基本功能配置</h2><p>通过上面的折腾，你应该能够在自己的 <span class="label default">GitHub Pages</span> 上看到自己的博客了，接下来就是配置和增加功能，如阅读统计、加上评论和安装插件啥的，还有就是添加一些博客的基本信息，这些配置建议在写文章之前先折腾好。</p>
<p>基本功能配置大部分就是改两个文件，都叫_config.yml，文章的<a href="#一些定义">开头位置</a>已告诉大家。</p>
<p>我觉得与其将两个文件中的每点都分开来解释，倒不如直接将这两个文件贴出来，然后通过注释的方式告诉大家配置的方法，所以下面我会贴出这两个文件，怎么配置看注释就好了～</p>
<h3 id="选择主题"><a href="#选择主题" class="headerlink" title="选择主题"></a>选择主题</h3><p>不过还有一件事要先说一说，就是选择合适自己的主题，这是搭建好博客后最重要的一件事。</p>
<div class="note info"><p>默认的主题功能少，而且不太好看（个人感觉），而一些主题则有很多功能，也比较美观。</p></div>

<p>我选择的是 <a href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow noopener noreferrer" target="_blank">NexT</a>，简洁且功能不少，也是在 GitHub 上<a href="https://github.com/search?o=desc&amp;q=topic%3Ahexo-theme&amp;s=stars&amp;type=Repositories" rel="external nofollow noopener noreferrer" target="_blank">被 Star</a> 最多的一个 <span class="label default">Hexo</span> 主题。</p>
<p>第二多的是 <a href="https://github.com/litten/hexo-theme-yilia" rel="external nofollow noopener noreferrer" target="_blank">hexo-theme-yilia</a>，第三多的是 <a href="https://github.com/viosey/hexo-theme-material" rel="external nofollow noopener noreferrer" target="_blank">hexo-theme-material</a>（还有一个很棒的 Material Design 风格主题 <a href="https://github.com/yscoder/hexo-theme-indigo/tree/card" rel="external nofollow noopener noreferrer" target="_blank">hexo-theme-material-indigo</a>），还有一个我感觉比较有特色的，叫 <a href="https://github.com/probberechts/cactus-dark" rel="external nofollow noopener noreferrer" target="_blank">Cactus Dark</a>，这几个我感觉都不错，可以点开链接看看长啥样。</p>
<p>要是我上面说的还是没有合你胃口的，咋办？去 <a href="https://hexo.io/themes/" rel="external nofollow noopener noreferrer" target="_blank">Hexo Themes</a> 慢慢找。</p>
<p>至于换主题，很简单，我拿 NexT 主题举个栗子。</p>
<p>首先在这个主题的 GitHub 页面的右上方复制链接，如下图：</p>
<p><img src="http://qn.codenote.pro/2018-10-05-22-24-19.png" alt="2018-10-05-22-24-19.png"></p>
<p>然后：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/themes/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">git <span class="built_in">clone</span> https://github.com/iissnan/hexo-theme-next.git</div></pre></div></div></figure>
<p>把 <span class="label default">hexo-theme-next</span> 改名为 <span class="label default">next</span>，再在<span class="label info">站点配置文件</span>中修改成如下即可：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></div><div class="line"><span class="attr">theme:</span> <span class="string">next</span></div></pre></div></div></figure>
<h3 id="站点配置文件"><a href="#站点配置文件" class="headerlink" title="站点配置文件"></a>站点配置文件</h3><p>请先查看 <a href="https://hexo.io/zh-cn/docs/configuration.html" rel="external nofollow noopener noreferrer" target="_blank">Hexo 官方文档</a>，再查看下面我贴出的，如果这样后你还是对有些地方比较懵，可以自行 Google。</p>
<div class="note warning"><p>如果你的文件中没有相关内容，请勿直接添加，且所有的<span class="label default">:</span>都为英文字符，它后面都有一个<span class="label default">空格</span>。</p></div>

<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Hexo Configuration</span></div><div class="line"><span class="comment">## Docs: https://hexo.io/docs/configuration.html</span></div><div class="line"><span class="comment">## Source: https://github.com/hexojs/hexo/</span></div><div class="line"></div><div class="line"><span class="comment"># Site</span></div><div class="line"><span class="attr">title:</span> <span class="string">九阳的笔记本</span></div><div class="line"><span class="attr">subtitle:</span></div><div class="line"><span class="attr">description:</span> <span class="string">学无止境！</span></div><div class="line"><span class="attr">keywords:</span></div><div class="line"><span class="attr">author:</span> <span class="string">yszar</span></div><div class="line"><span class="attr">language:</span> <span class="string">zh-CN</span></div><div class="line"><span class="attr">timezone:</span></div><div class="line"></div><div class="line"><span class="comment"># URL</span></div><div class="line"><span class="comment">## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'</span></div><div class="line"><span class="comment">#url: http://yoursite.com</span></div><div class="line"><span class="attr">root:</span> <span class="string">/</span></div><div class="line"></div><div class="line"><span class="comment"># 博客文章的 URL 结构，请务必写文章之前就想好！</span></div><div class="line"><span class="comment"># 详细参数请查看：https://hexo.io/docs/permalinks.html</span></div><div class="line"><span class="comment">#permalink: :year/:month/:day/:title/</span></div><div class="line"><span class="comment">#由于用了hexo-translate-title，所以写成以下格式</span></div><div class="line"><span class="attr">permalink:</span> <span class="string">:translate_title.html</span></div><div class="line"><span class="attr">permalink_defaults:</span></div><div class="line"></div><div class="line"><span class="attr">popularPosts:</span></div><div class="line"><span class="attr">  googleAnalyticsAPI:</span></div><div class="line"><span class="attr">    clientId:</span> <span class="string">yszaryszar@translate-218216.iam.gserviceaccount.com</span></div><div class="line"><span class="attr">    serviceEmail:</span> <span class="string">yszaryszar@translate-218216.iam.gserviceaccount.com</span></div><div class="line"><span class="attr">    key:</span> <span class="string">/google-services-private-key.pem</span></div><div class="line"><span class="attr">    viewId:</span></div><div class="line"></div><div class="line"><span class="comment"># Directory</span></div><div class="line"><span class="attr">source_dir:</span> <span class="string">source</span></div><div class="line"><span class="attr">public_dir:</span> <span class="string">public</span></div><div class="line"><span class="attr">tag_dir:</span> <span class="string">tags</span></div><div class="line"><span class="attr">archive_dir:</span> <span class="string">archives</span></div><div class="line"><span class="attr">category_dir:</span> <span class="string">categories</span></div><div class="line"><span class="attr">code_dir:</span> <span class="string">downloads/code</span></div><div class="line"><span class="attr">i18n_dir:</span> <span class="string">:lang</span></div><div class="line"><span class="attr">skip_render:</span> <span class="string">README.md</span></div><div class="line"></div><div class="line"><span class="attr">leancloud_counter_security:</span></div><div class="line"><span class="attr">  enable_sync:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  app_id:</span></div><div class="line"><span class="attr">  app_key:</span></div><div class="line"><span class="attr">  username:</span></div><div class="line"><span class="attr">  password:</span></div><div class="line"></div><div class="line"><span class="comment"># Writing</span></div><div class="line"><span class="attr">new_post_name:</span> <span class="string">:year-:month-:day-:title.md</span> <span class="comment"># File name of new posts</span></div><div class="line"><span class="attr">default_layout:</span> <span class="string">post</span></div><div class="line"><span class="attr">titlecase:</span> <span class="literal">false</span> <span class="comment"># Transform title into titlecase</span></div><div class="line"><span class="attr">external_link:</span> <span class="literal">true</span> <span class="comment"># Open external links in new tab</span></div><div class="line"><span class="attr">filename_case:</span> <span class="number">0</span></div><div class="line"><span class="attr">render_drafts:</span> <span class="literal">false</span></div><div class="line"><span class="attr">post_asset_folder:</span> <span class="literal">false</span></div><div class="line"><span class="attr">relative_link:</span> <span class="literal">false</span></div><div class="line"><span class="attr">future:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># 代码高亮设置</span></div><div class="line"><span class="attr">highlight:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  line_number:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># 代码高亮设置</span></div><div class="line"><span class="attr">  auto_detect:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  tab_replace:</span></div><div class="line"></div><div class="line"><span class="comment"># Home page setting</span></div><div class="line"><span class="comment"># path: Root path for your blogs index page. (default = '')</span></div><div class="line"><span class="comment"># per_page: Posts displayed per page. (0 = disable pagination)</span></div><div class="line"><span class="comment"># order_by: Posts order. (Order by date descending by default)</span></div><div class="line"><span class="attr">index_generator:</span></div><div class="line"><span class="attr">  path:</span> <span class="string">''</span></div><div class="line"><span class="attr">  per_page:</span> <span class="number">10</span></div><div class="line"><span class="attr">  order_by:</span> <span class="bullet">-date</span></div><div class="line"></div><div class="line"><span class="comment"># Category &amp; Tag</span></div><div class="line"><span class="attr">default_category:</span> <span class="string">uncategorized</span></div><div class="line"><span class="attr">category_map:</span></div><div class="line"><span class="attr">tag_map:</span></div><div class="line"></div><div class="line"><span class="comment"># Date / Time format</span></div><div class="line"><span class="comment">## Hexo uses Moment.js to parse and display date</span></div><div class="line"><span class="comment">## You can customize the date format as defined in</span></div><div class="line"><span class="comment">## http://momentjs.com/docs/#/displaying/format/</span></div><div class="line"><span class="attr">date_format:</span> <span class="string">YYYY-MM-DD</span></div><div class="line"><span class="attr">time_format:</span> <span class="attr">HH:mm:ss</span></div><div class="line"></div><div class="line"><span class="comment"># Pagination</span></div><div class="line"><span class="comment">## Set per_page to 0 to disable pagination</span></div><div class="line"><span class="attr">per_page:</span> <span class="number">10</span></div><div class="line"><span class="attr">pagination_dir:</span> <span class="string">page</span></div><div class="line"></div><div class="line"><span class="comment"># Extensions</span></div><div class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></div><div class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></div><div class="line"><span class="comment"># 主题配置（6.x.x）</span></div><div class="line"><span class="attr">theme:</span> <span class="string">next-reloaded</span></div><div class="line"></div><div class="line"><span class="comment">#出站链接自动nofollow</span></div><div class="line"><span class="attr">nofollow:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  exclude:</span></div><div class="line"><span class="bullet">  -</span> <span class="string">yszar.github.io</span></div><div class="line"><span class="bullet">  -</span> <span class="string">yszaryszar.gitee.io</span></div><div class="line"></div><div class="line"><span class="comment"># RSS订阅</span></div><div class="line"><span class="comment"># RSS，要先进入站点文件夹根目录安装插件</span></div><div class="line"><span class="comment"># npm install hexo-generator-feed --save 即可</span></div><div class="line"><span class="comment"># 无需更多配置</span></div><div class="line"><span class="comment"># 参数说明查看 README：https://github.com/hexojs/hexo-generator-feed</span></div><div class="line"><span class="attr">feed:</span></div><div class="line"><span class="attr">  type:</span> <span class="string">atom</span></div><div class="line"><span class="attr">  path:</span> <span class="string">atom.xml</span></div><div class="line"><span class="comment"># 文章数，0 为全部</span></div><div class="line"><span class="attr">  limit:</span> <span class="number">0</span></div><div class="line"><span class="attr">  hub:</span></div><div class="line"><span class="comment"># 是否包含文章内容</span></div><div class="line"><span class="attr">  content:</span> <span class="string">true</span></div><div class="line"><span class="attr">  content_limit:</span> <span class="number">140</span></div><div class="line"><span class="attr">  content_limit_delim:</span> <span class="string">' '</span></div><div class="line"></div><div class="line"><span class="comment"># 搜索</span></div><div class="line"><span class="attr">search:</span></div><div class="line"><span class="attr">  path:</span> <span class="string">search.xml</span></div><div class="line"><span class="attr">  field:</span> <span class="string">post</span></div><div class="line"><span class="attr">  format:</span> <span class="string">html</span></div><div class="line"><span class="attr">  limit:</span> <span class="number">10000</span></div><div class="line"></div><div class="line"><span class="comment"># 数学公式</span></div><div class="line"><span class="attr">mathjax2:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment">#翻译标题</span></div><div class="line"><span class="attr">translate_title:</span></div><div class="line"><span class="attr">  translate_way:</span> <span class="string">google</span>  <span class="comment"># google,youdao,baidu_with_appid,baidu_no_appid</span></div><div class="line"><span class="attr">  is_need_proxy:</span> <span class="literal">false</span>     <span class="comment"># true | false</span></div><div class="line">  <span class="comment">#proxy_url: http://127.0.0.1:12333 # Your proxy_url</span></div><div class="line">  <span class="comment"># youdao_api_key: '' # Your youdao_api_key</span></div><div class="line">  <span class="comment"># youdao_keyfrom: xxxx-blog # Your youdao_keyfrom</span></div><div class="line">  <span class="comment"># baidu_appid: '' # Your baidu_appid</span></div><div class="line">  <span class="comment"># baidu_appkey: '' # Your baidu_appkey</span></div><div class="line"></div><div class="line"><span class="attr">sitemap:</span></div><div class="line"><span class="attr">  path:</span> <span class="string">sitemap.xml</span></div><div class="line"><span class="attr">baidusitemap:</span></div><div class="line"><span class="attr">  path:</span> <span class="string">baidusitemap.xml</span></div><div class="line"></div><div class="line"><span class="attr">url:</span> <span class="attr">https://yszar.github.io</span></div><div class="line"><span class="comment"># Deployment</span></div><div class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></div><div class="line"><span class="attr">deploy:</span></div><div class="line"><span class="attr">  - type:</span> <span class="string">git</span></div><div class="line"><span class="attr">    repo:</span></div><div class="line"><span class="attr">      github:</span> <span class="string">git@github.com:yszar/yszar.github.io.git,master</span></div><div class="line"><span class="attr">      coding:</span> <span class="string">git@git.coding.net:yszar/yszar.git,master</span></div><div class="line"><span class="attr">      oschina:</span> <span class="string">git@gitee.com:yszaryszar/yszaryszar.git,master</span></div><div class="line"><span class="attr">  - type:</span> <span class="string">leancloud_counter_security_sync</span></div><div class="line">    <span class="comment"># other deployer</span></div><div class="line">  <span class="comment">#breach: master</span></div></pre></div></div></figure>
<h3 id="主题配置文件"><a href="#主题配置文件" class="headerlink" title="主题配置文件"></a>主题配置文件</h3><p>如果你的主题不是 NexT，那么请另 Google。建议先查看 <a href="http://theme-next.iissnan.com/getting-started.html" rel="external nofollow noopener noreferrer" target="_blank">NexT 官方文档</a>，写的很好，多逗留会没坏处。</p>
<div class="note info"><p>为了保证阅读效果，我把我没有配置的差不多都删了，有问题可以多 Google。如果你觉得里面有必要告诉大家，但我却没写，欢迎<a href="#footer">评论</a>告诉我，我会及时加上滴～</p></div>

<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div><div class="line">210</div><div class="line">211</div><div class="line">212</div><div class="line">213</div><div class="line">214</div><div class="line">215</div><div class="line">216</div><div class="line">217</div><div class="line">218</div><div class="line">219</div><div class="line">220</div><div class="line">221</div><div class="line">222</div><div class="line">223</div><div class="line">224</div><div class="line">225</div><div class="line">226</div><div class="line">227</div><div class="line">228</div><div class="line">229</div><div class="line">230</div><div class="line">231</div><div class="line">232</div><div class="line">233</div><div class="line">234</div><div class="line">235</div><div class="line">236</div><div class="line">237</div><div class="line">238</div><div class="line">239</div><div class="line">240</div><div class="line">241</div><div class="line">242</div><div class="line">243</div><div class="line">244</div><div class="line">245</div><div class="line">246</div><div class="line">247</div><div class="line">248</div><div class="line">249</div><div class="line">250</div><div class="line">251</div><div class="line">252</div><div class="line">253</div><div class="line">254</div><div class="line">255</div><div class="line">256</div><div class="line">257</div><div class="line">258</div><div class="line">259</div><div class="line">260</div><div class="line">261</div><div class="line">262</div><div class="line">263</div><div class="line">264</div><div class="line">265</div><div class="line">266</div><div class="line">267</div><div class="line">268</div><div class="line">269</div><div class="line">270</div><div class="line">271</div><div class="line">272</div><div class="line">273</div><div class="line">274</div><div class="line">275</div><div class="line">276</div><div class="line">277</div><div class="line">278</div><div class="line">279</div><div class="line">280</div><div class="line">281</div><div class="line">282</div><div class="line">283</div><div class="line">284</div><div class="line">285</div><div class="line">286</div><div class="line">287</div><div class="line">288</div><div class="line">289</div><div class="line">290</div><div class="line">291</div><div class="line">292</div><div class="line">293</div><div class="line">294</div><div class="line">295</div><div class="line">296</div><div class="line">297</div><div class="line">298</div><div class="line">299</div><div class="line">300</div><div class="line">301</div><div class="line">302</div><div class="line">303</div><div class="line">304</div><div class="line">305</div><div class="line">306</div><div class="line">307</div><div class="line">308</div><div class="line">309</div><div class="line">310</div><div class="line">311</div><div class="line">312</div><div class="line">313</div><div class="line">314</div><div class="line">315</div><div class="line">316</div><div class="line">317</div><div class="line">318</div><div class="line">319</div><div class="line">320</div><div class="line">321</div><div class="line">322</div><div class="line">323</div><div class="line">324</div><div class="line">325</div><div class="line">326</div><div class="line">327</div><div class="line">328</div><div class="line">329</div><div class="line">330</div><div class="line">331</div><div class="line">332</div><div class="line">333</div><div class="line">334</div><div class="line">335</div><div class="line">336</div><div class="line">337</div><div class="line">338</div><div class="line">339</div><div class="line">340</div><div class="line">341</div><div class="line">342</div><div class="line">343</div><div class="line">344</div><div class="line">345</div><div class="line">346</div><div class="line">347</div><div class="line">348</div><div class="line">349</div><div class="line">350</div><div class="line">351</div><div class="line">352</div><div class="line">353</div><div class="line">354</div><div class="line">355</div><div class="line">356</div><div class="line">357</div><div class="line">358</div><div class="line">359</div><div class="line">360</div><div class="line">361</div><div class="line">362</div><div class="line">363</div><div class="line">364</div><div class="line">365</div><div class="line">366</div><div class="line">367</div><div class="line">368</div><div class="line">369</div><div class="line">370</div><div class="line">371</div><div class="line">372</div><div class="line">373</div><div class="line">374</div><div class="line">375</div><div class="line">376</div><div class="line">377</div><div class="line">378</div><div class="line">379</div><div class="line">380</div><div class="line">381</div><div class="line">382</div><div class="line">383</div><div class="line">384</div><div class="line">385</div><div class="line">386</div><div class="line">387</div><div class="line">388</div><div class="line">389</div><div class="line">390</div><div class="line">391</div><div class="line">392</div><div class="line">393</div><div class="line">394</div><div class="line">395</div><div class="line">396</div><div class="line">397</div><div class="line">398</div><div class="line">399</div><div class="line">400</div><div class="line">401</div><div class="line">402</div><div class="line">403</div><div class="line">404</div><div class="line">405</div><div class="line">406</div><div class="line">407</div><div class="line">408</div><div class="line">409</div><div class="line">410</div><div class="line">411</div><div class="line">412</div><div class="line">413</div><div class="line">414</div><div class="line">415</div><div class="line">416</div><div class="line">417</div><div class="line">418</div><div class="line">419</div><div class="line">420</div><div class="line">421</div><div class="line">422</div><div class="line">423</div><div class="line">424</div><div class="line">425</div><div class="line">426</div><div class="line">427</div><div class="line">428</div><div class="line">429</div><div class="line">430</div><div class="line">431</div><div class="line">432</div><div class="line">433</div><div class="line">434</div><div class="line">435</div><div class="line">436</div><div class="line">437</div><div class="line">438</div><div class="line">439</div><div class="line">440</div><div class="line">441</div><div class="line">442</div><div class="line">443</div><div class="line">444</div><div class="line">445</div><div class="line">446</div><div class="line">447</div><div class="line">448</div><div class="line">449</div><div class="line">450</div><div class="line">451</div><div class="line">452</div><div class="line">453</div><div class="line">454</div><div class="line">455</div><div class="line">456</div><div class="line">457</div><div class="line">458</div><div class="line">459</div><div class="line">460</div><div class="line">461</div><div class="line">462</div><div class="line">463</div><div class="line">464</div><div class="line">465</div><div class="line">466</div><div class="line">467</div><div class="line">468</div><div class="line">469</div><div class="line">470</div><div class="line">471</div><div class="line">472</div><div class="line">473</div><div class="line">474</div><div class="line">475</div><div class="line">476</div><div class="line">477</div><div class="line">478</div><div class="line">479</div><div class="line">480</div><div class="line">481</div><div class="line">482</div><div class="line">483</div><div class="line">484</div><div class="line">485</div><div class="line">486</div><div class="line">487</div><div class="line">488</div><div class="line">489</div><div class="line">490</div><div class="line">491</div><div class="line">492</div><div class="line">493</div><div class="line">494</div><div class="line">495</div><div class="line">496</div><div class="line">497</div><div class="line">498</div><div class="line">499</div><div class="line">500</div><div class="line">501</div><div class="line">502</div><div class="line">503</div><div class="line">504</div><div class="line">505</div><div class="line">506</div><div class="line">507</div><div class="line">508</div><div class="line">509</div><div class="line">510</div><div class="line">511</div><div class="line">512</div><div class="line">513</div><div class="line">514</div><div class="line">515</div><div class="line">516</div><div class="line">517</div><div class="line">518</div><div class="line">519</div><div class="line">520</div><div class="line">521</div><div class="line">522</div><div class="line">523</div><div class="line">524</div><div class="line">525</div><div class="line">526</div><div class="line">527</div><div class="line">528</div><div class="line">529</div><div class="line">530</div><div class="line">531</div><div class="line">532</div><div class="line">533</div><div class="line">534</div><div class="line">535</div><div class="line">536</div><div class="line">537</div><div class="line">538</div><div class="line">539</div><div class="line">540</div><div class="line">541</div><div class="line">542</div><div class="line">543</div><div class="line">544</div><div class="line">545</div><div class="line">546</div><div class="line">547</div><div class="line">548</div><div class="line">549</div><div class="line">550</div><div class="line">551</div><div class="line">552</div><div class="line">553</div><div class="line">554</div><div class="line">555</div><div class="line">556</div><div class="line">557</div><div class="line">558</div><div class="line">559</div><div class="line">560</div><div class="line">561</div><div class="line">562</div><div class="line">563</div><div class="line">564</div><div class="line">565</div><div class="line">566</div><div class="line">567</div><div class="line">568</div><div class="line">569</div><div class="line">570</div><div class="line">571</div><div class="line">572</div><div class="line">573</div><div class="line">574</div><div class="line">575</div><div class="line">576</div><div class="line">577</div><div class="line">578</div><div class="line">579</div><div class="line">580</div><div class="line">581</div><div class="line">582</div><div class="line">583</div><div class="line">584</div><div class="line">585</div><div class="line">586</div><div class="line">587</div><div class="line">588</div><div class="line">589</div><div class="line">590</div><div class="line">591</div><div class="line">592</div><div class="line">593</div><div class="line">594</div><div class="line">595</div><div class="line">596</div><div class="line">597</div><div class="line">598</div><div class="line">599</div><div class="line">600</div><div class="line">601</div><div class="line">602</div><div class="line">603</div><div class="line">604</div><div class="line">605</div><div class="line">606</div><div class="line">607</div><div class="line">608</div><div class="line">609</div><div class="line">610</div><div class="line">611</div><div class="line">612</div><div class="line">613</div><div class="line">614</div><div class="line">615</div><div class="line">616</div><div class="line">617</div><div class="line">618</div><div class="line">619</div><div class="line">620</div><div class="line">621</div><div class="line">622</div><div class="line">623</div><div class="line">624</div><div class="line">625</div><div class="line">626</div><div class="line">627</div><div class="line">628</div><div class="line">629</div><div class="line">630</div><div class="line">631</div><div class="line">632</div><div class="line">633</div><div class="line">634</div><div class="line">635</div><div class="line">636</div><div class="line">637</div><div class="line">638</div><div class="line">639</div><div class="line">640</div><div class="line">641</div><div class="line">642</div><div class="line">643</div><div class="line">644</div><div class="line">645</div><div class="line">646</div><div class="line">647</div><div class="line">648</div><div class="line">649</div><div class="line">650</div><div class="line">651</div><div class="line">652</div><div class="line">653</div><div class="line">654</div><div class="line">655</div><div class="line">656</div><div class="line">657</div><div class="line">658</div><div class="line">659</div><div class="line">660</div><div class="line">661</div><div class="line">662</div><div class="line">663</div><div class="line">664</div><div class="line">665</div><div class="line">666</div><div class="line">667</div><div class="line">668</div><div class="line">669</div><div class="line">670</div><div class="line">671</div><div class="line">672</div><div class="line">673</div><div class="line">674</div><div class="line">675</div><div class="line">676</div><div class="line">677</div><div class="line">678</div><div class="line">679</div><div class="line">680</div><div class="line">681</div><div class="line">682</div><div class="line">683</div><div class="line">684</div><div class="line">685</div><div class="line">686</div><div class="line">687</div><div class="line">688</div><div class="line">689</div><div class="line">690</div><div class="line">691</div><div class="line">692</div><div class="line">693</div><div class="line">694</div><div class="line">695</div><div class="line">696</div><div class="line">697</div><div class="line">698</div><div class="line">699</div><div class="line">700</div><div class="line">701</div><div class="line">702</div><div class="line">703</div><div class="line">704</div><div class="line">705</div><div class="line">706</div><div class="line">707</div><div class="line">708</div><div class="line">709</div><div class="line">710</div><div class="line">711</div><div class="line">712</div><div class="line">713</div><div class="line">714</div><div class="line">715</div><div class="line">716</div><div class="line">717</div><div class="line">718</div><div class="line">719</div><div class="line">720</div><div class="line">721</div><div class="line">722</div><div class="line">723</div><div class="line">724</div><div class="line">725</div><div class="line">726</div><div class="line">727</div><div class="line">728</div><div class="line">729</div><div class="line">730</div><div class="line">731</div><div class="line">732</div><div class="line">733</div><div class="line">734</div><div class="line">735</div><div class="line">736</div><div class="line">737</div><div class="line">738</div><div class="line">739</div><div class="line">740</div><div class="line">741</div><div class="line">742</div><div class="line">743</div><div class="line">744</div><div class="line">745</div><div class="line">746</div><div class="line">747</div><div class="line">748</div><div class="line">749</div><div class="line">750</div><div class="line">751</div><div class="line">752</div><div class="line">753</div><div class="line">754</div><div class="line">755</div><div class="line">756</div><div class="line">757</div><div class="line">758</div><div class="line">759</div><div class="line">760</div><div class="line">761</div><div class="line">762</div><div class="line">763</div><div class="line">764</div><div class="line">765</div><div class="line">766</div><div class="line">767</div><div class="line">768</div><div class="line">769</div><div class="line">770</div><div class="line">771</div><div class="line">772</div><div class="line">773</div><div class="line">774</div><div class="line">775</div><div class="line">776</div><div class="line">777</div><div class="line">778</div><div class="line">779</div><div class="line">780</div><div class="line">781</div><div class="line">782</div><div class="line">783</div><div class="line">784</div><div class="line">785</div><div class="line">786</div><div class="line">787</div><div class="line">788</div><div class="line">789</div><div class="line">790</div><div class="line">791</div><div class="line">792</div><div class="line">793</div><div class="line">794</div><div class="line">795</div><div class="line">796</div><div class="line">797</div><div class="line">798</div><div class="line">799</div><div class="line">800</div><div class="line">801</div><div class="line">802</div><div class="line">803</div><div class="line">804</div><div class="line">805</div><div class="line">806</div><div class="line">807</div><div class="line">808</div><div class="line">809</div><div class="line">810</div><div class="line">811</div><div class="line">812</div><div class="line">813</div><div class="line">814</div><div class="line">815</div><div class="line">816</div><div class="line">817</div><div class="line">818</div><div class="line">819</div><div class="line">820</div><div class="line">821</div><div class="line">822</div><div class="line">823</div><div class="line">824</div><div class="line">825</div><div class="line">826</div><div class="line">827</div><div class="line">828</div><div class="line">829</div><div class="line">830</div><div class="line">831</div><div class="line">832</div><div class="line">833</div><div class="line">834</div><div class="line">835</div><div class="line">836</div><div class="line">837</div><div class="line">838</div><div class="line">839</div><div class="line">840</div><div class="line">841</div><div class="line">842</div><div class="line">843</div><div class="line">844</div><div class="line">845</div><div class="line">846</div><div class="line">847</div><div class="line">848</div><div class="line">849</div><div class="line">850</div><div class="line">851</div><div class="line">852</div><div class="line">853</div><div class="line">854</div><div class="line">855</div><div class="line">856</div><div class="line">857</div><div class="line">858</div><div class="line">859</div><div class="line">860</div><div class="line">861</div><div class="line">862</div><div class="line">863</div><div class="line">864</div><div class="line">865</div><div class="line">866</div><div class="line">867</div><div class="line">868</div><div class="line">869</div><div class="line">870</div><div class="line">871</div><div class="line">872</div><div class="line">873</div><div class="line">874</div><div class="line">875</div><div class="line">876</div><div class="line">877</div><div class="line">878</div><div class="line">879</div><div class="line">880</div><div class="line">881</div><div class="line">882</div><div class="line">883</div><div class="line">884</div><div class="line">885</div><div class="line">886</div><div class="line">887</div><div class="line">888</div><div class="line">889</div><div class="line">890</div><div class="line">891</div><div class="line">892</div><div class="line">893</div><div class="line">894</div><div class="line">895</div><div class="line">896</div><div class="line">897</div><div class="line">898</div><div class="line">899</div><div class="line">900</div><div class="line">901</div><div class="line">902</div><div class="line">903</div><div class="line">904</div><div class="line">905</div><div class="line">906</div><div class="line">907</div><div class="line">908</div><div class="line">909</div><div class="line">910</div><div class="line">911</div><div class="line">912</div><div class="line">913</div><div class="line">914</div><div class="line">915</div><div class="line">916</div><div class="line">917</div><div class="line">918</div><div class="line">919</div><div class="line">920</div><div class="line">921</div><div class="line">922</div><div class="line">923</div><div class="line">924</div><div class="line">925</div><div class="line">926</div><div class="line">927</div><div class="line">928</div><div class="line">929</div><div class="line">930</div><div class="line">931</div><div class="line">932</div><div class="line">933</div><div class="line">934</div><div class="line">935</div><div class="line">936</div><div class="line">937</div><div class="line">938</div><div class="line">939</div><div class="line">940</div><div class="line">941</div><div class="line">942</div><div class="line">943</div><div class="line">944</div><div class="line">945</div><div class="line">946</div><div class="line">947</div><div class="line">948</div><div class="line">949</div><div class="line">950</div><div class="line">951</div><div class="line">952</div><div class="line">953</div><div class="line">954</div><div class="line">955</div><div class="line">956</div><div class="line">957</div><div class="line">958</div><div class="line">959</div><div class="line">960</div><div class="line">961</div><div class="line">962</div><div class="line">963</div><div class="line">964</div><div class="line">965</div><div class="line">966</div><div class="line">967</div><div class="line">968</div><div class="line">969</div><div class="line">970</div><div class="line">971</div><div class="line">972</div><div class="line">973</div><div class="line">974</div><div class="line">975</div><div class="line">976</div><div class="line">977</div><div class="line">978</div><div class="line">979</div><div class="line">980</div><div class="line">981</div><div class="line">982</div><div class="line">983</div><div class="line">984</div><div class="line">985</div><div class="line">986</div><div class="line">987</div><div class="line">988</div><div class="line">989</div><div class="line">990</div><div class="line">991</div><div class="line">992</div><div class="line">993</div><div class="line">994</div><div class="line">995</div><div class="line">996</div><div class="line">997</div><div class="line">998</div><div class="line">999</div><div class="line">1000</div><div class="line">1001</div><div class="line">1002</div><div class="line">1003</div><div class="line">1004</div><div class="line">1005</div><div class="line">1006</div><div class="line">1007</div><div class="line">1008</div><div class="line">1009</div><div class="line">1010</div><div class="line">1011</div><div class="line">1012</div><div class="line">1013</div><div class="line">1014</div><div class="line">1015</div><div class="line">1016</div><div class="line">1017</div><div class="line">1018</div><div class="line">1019</div><div class="line">1020</div><div class="line">1021</div><div class="line">1022</div><div class="line">1023</div><div class="line">1024</div><div class="line">1025</div><div class="line">1026</div><div class="line">1027</div><div class="line">1028</div><div class="line">1029</div><div class="line">1030</div><div class="line">1031</div><div class="line">1032</div><div class="line">1033</div><div class="line">1034</div><div class="line">1035</div><div class="line">1036</div><div class="line">1037</div><div class="line">1038</div><div class="line">1039</div><div class="line">1040</div><div class="line">1041</div><div class="line">1042</div><div class="line">1043</div><div class="line">1044</div><div class="line">1045</div><div class="line">1046</div><div class="line">1047</div><div class="line">1048</div><div class="line">1049</div><div class="line">1050</div><div class="line">1051</div><div class="line">1052</div><div class="line">1053</div><div class="line">1054</div><div class="line">1055</div><div class="line">1056</div><div class="line">1057</div><div class="line">1058</div><div class="line">1059</div><div class="line">1060</div><div class="line">1061</div><div class="line">1062</div><div class="line">1063</div><div class="line">1064</div><div class="line">1065</div><div class="line">1066</div><div class="line">1067</div><div class="line">1068</div><div class="line">1069</div><div class="line">1070</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Theme Core Configuration Settings</span></div><div class="line"><span class="comment"># 主题核心配置设置</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># If false, merge configs from `_data/next.yml` into default configuration (rewrite).</span></div><div class="line"><span class="comment"># If true, will fully override default configuration by options from `_data/next.yml` (override). Only for NexT settings.</span></div><div class="line"><span class="comment"># And if true, all config from default NexT `_config.yml` must be copied into `next.yml`. Use if you know what you are doing.</span></div><div class="line"><span class="comment"># Useful if you want to comment some options from NexT `_config.yml` by `next.yml` without editing default config.</span></div><div class="line"><span class="comment"># 如果为false，则将`_data / next.yml`中的配置合并为默认配置（重写）。</span></div><div class="line"><span class="comment"># 如果为true，将完全覆盖来自`_data / next.yml`（覆盖）的选项的默认配置。 仅适用于NexT设置。</span></div><div class="line"><span class="comment"># 如果为true，则必须将默认NexT`_config.yml`中的所有配置复制到`next.yml`中。 如果您知道自己在做什么，请使用。</span></div><div class="line"><span class="comment"># 如果你想在不编辑默认配置的情况下用`next.yml`来评论来自NexT`_config.yml`的一些选项，这很有用。</span></div><div class="line"><span class="attr">override:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Allow to cache content generation. Introduced in NexT v6.0.0.</span></div><div class="line"><span class="comment"># 允许缓存内容生成。 在NexT v6.0.0中引入。</span></div><div class="line"><span class="attr">cache:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Redefine custom file paths. Introduced in NexT v6.0.2.</span></div><div class="line"><span class="comment"># If commented, will be used default custom file paths.</span></div><div class="line"></div><div class="line"><span class="comment"># For example, you want to put your custom styles file</span></div><div class="line"><span class="comment"># outside theme directory in root `source/_data`, set</span></div><div class="line"><span class="comment"># `styles: source/_data/styles.styl`</span></div><div class="line"><span class="comment"># 重新定义自定义文件路径。 在NexT v6.0.2中引入。</span></div><div class="line"><span class="comment"># 如果已注释，将使用默认的自定义文件路径。</span></div><div class="line"></div><div class="line"><span class="comment"># 例如，您想要放置自定义样式文件</span></div><div class="line"><span class="comment"># 设置</span></div><div class="line"><span class="comment"># `style：source / _data / styles.styl`</span></div><div class="line"></div><div class="line"><span class="comment">#custom_file_path:</span></div><div class="line">  <span class="comment"># Default paths: layout/_custom/*</span></div><div class="line">  <span class="comment">#head: source/_data/head.swig</span></div><div class="line">  <span class="comment">#header: source/_data/header.swig</span></div><div class="line">  <span class="comment">#sidebar: source/_data/sidebar.swig</span></div><div class="line"></div><div class="line">  <span class="comment"># Default path: source/css/_variables/custom.styl</span></div><div class="line">  <span class="comment">#variables: source/_data/variables.styl</span></div><div class="line">  <span class="comment"># Default path: source/css/_mixins/custom.styl</span></div><div class="line">  <span class="comment">#mixins: source/_data/mixins.styl</span></div><div class="line">  <span class="comment"># Default path: source/css/_custom/custom.styl</span></div><div class="line">  <span class="comment">#styles: source/_data/styles.styl</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Site Information Settings</span></div><div class="line"><span class="comment"># 网站信息设置</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># To get or check favicons visit: https://realfavicongenerator.net</span></div><div class="line"><span class="comment"># Put your favicons into `hexo-site/source/` (recommend) or `hexo-site/themes/next/source/images/` directory.</span></div><div class="line"></div><div class="line"><span class="comment"># Default NexT favicons placed in `hexo-site/themes/next/source/images/` directory.</span></div><div class="line"><span class="comment"># And if you want to place your icons in `hexo-site/source/` root directory, you must remove `/images` prefix from pathes.</span></div><div class="line"></div><div class="line"><span class="comment"># For example, you put your favicons into `hexo-site/source/images` directory.</span></div><div class="line"><span class="comment"># Then need to rename &amp; redefine they on any other names, otherwise icons from Next will rewrite your custom icons in Hexo.</span></div><div class="line"><span class="comment"># 站点图标啦，直接去 https://realfavicongenerator.net</span></div><div class="line"><span class="comment"># 选项弄好后，下载压缩包，解压复制粘贴</span></div><div class="line"><span class="comment"># 建议放在 hexo-site/source/images/ 里（没有自己建）</span></div><div class="line"><span class="comment"># 这样可以避免更新 NexT 主题的时候遇到麻烦</span></div><div class="line"><span class="comment"># 最后记得要稍微改下文件名，与下面的保持一致</span></div><div class="line"><span class="attr">favicon:</span></div><div class="line"><span class="attr">  small:</span> <span class="string">/images/favicon-16x16-next.png</span></div><div class="line"><span class="attr">  medium:</span> <span class="string">/images/favicon-32x32-next.ico</span></div><div class="line"><span class="attr">  apple_touch_icon:</span> <span class="string">/images/apple-touch-icon-next.png</span></div><div class="line"><span class="attr">  safari_pinned_tab:</span> <span class="string">/images/logo.svg</span></div><div class="line">  <span class="comment">#android_manifest: /images/manifest.json</span></div><div class="line">  <span class="comment">#ms_browserconfig: /images/browserconfig.xml</span></div><div class="line"><span class="comment"># 站点关键字，利于 SEO 大概，记得用英文逗号分隔</span></div><div class="line"><span class="comment">#keywords: "Hexo, NexT"</span></div><div class="line"><span class="comment"># Set rss to false to disable feed link.</span></div><div class="line"><span class="comment"># Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.</span></div><div class="line"><span class="comment"># Set rss to specific value if you have burned your feed already.</span></div><div class="line"></div><div class="line"><span class="attr">rss:</span> <span class="string">/atom.xml</span></div><div class="line"></div><div class="line"><span class="attr">footer:</span></div><div class="line"><span class="comment"># 页脚配置</span></div><div class="line">  <span class="comment"># Specify the date when the site was setup.</span></div><div class="line">  <span class="comment"># If not defined, current year will be used.</span></div><div class="line">  <span class="comment"># 指定站点设置的日期。</span></div><div class="line">  <span class="comment"># 如果未定义，将使用当前年份。</span></div><div class="line"><span class="attr">  since:</span> <span class="number">2018</span></div><div class="line"></div><div class="line">  <span class="comment"># Icon between year and copyright info.</span></div><div class="line">  <span class="comment"># 年份后面的图标，为 Font Awesome 图标</span></div><div class="line">  <span class="comment"># 自己去纠结 https://fontawesome.com/v4.7.0/</span></div><div class="line">  <span class="comment"># 然后更改名字就行，下面的有关图标的设置都一样</span></div><div class="line"><span class="attr">  icon:</span></div><div class="line">    <span class="comment"># Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons</span></div><div class="line">    <span class="comment"># `heart` is recommended with animation in red (#ff0000).</span></div><div class="line"><span class="attr">    name:</span> <span class="string">heart</span></div><div class="line">    <span class="comment"># If you want to animate the icon, set it to true.</span></div><div class="line"><span class="attr">    animated:</span> <span class="literal">false</span></div><div class="line">    <span class="comment"># Change the color of icon, using Hex Code.</span></div><div class="line">    <span class="comment">#使用Hex代码更改图标的颜色。</span></div><div class="line"><span class="attr">    color:</span> <span class="string">"#808080"</span></div><div class="line"></div><div class="line">  <span class="comment"># If not defined, will be used `author` from Hexo main config.</span></div><div class="line">  <span class="comment"># 如果不定义，默认用站点配置文件的 author 名</span></div><div class="line"><span class="attr">  copyright:</span></div><div class="line">  <span class="comment"># -------------------------------------------------------------</span></div><div class="line">  <span class="comment"># Hexo 的链接</span></div><div class="line"><span class="attr">  powered:</span></div><div class="line">    <span class="comment"># Hexo link (Powered by Hexo).</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">false</span></div><div class="line">    <span class="comment"># Version info of Hexo after Hexo link (vX.X.X).</span></div><div class="line"><span class="attr">    version:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">  theme:</span></div><div class="line">    <span class="comment"># Theme &amp; scheme info link (Theme - NexT.scheme).</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">false</span></div><div class="line">    <span class="comment"># Version info of NexT after scheme info (vX.X.X).</span></div><div class="line"><span class="attr">    version:</span> <span class="literal">false</span></div><div class="line">  <span class="comment"># -------------------------------------------------------------</span></div><div class="line">  <span class="comment"># Any custom text can be defined here.</span></div><div class="line">  <span class="comment">#可以在此处定义任何自定义文本。</span></div><div class="line">  <span class="comment">#custom_text: Hosted by &lt;a target="_blank" rel="external nofollow" href="https://pages.coding.me"&gt;&lt;b&gt;Coding Pages&lt;/b&gt;&lt;/a&gt;</span></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># SEO Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.</span></div><div class="line"><span class="comment"># See: https://support.google.com/webmasters/answer/139066</span></div><div class="line"><span class="comment"># Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )</span></div><div class="line"><span class="comment">#Canonical，在您的hexo中设置规范链接标记，您可以将它用于您的博客搜索引擎优化。</span></div><div class="line"><span class="comment">#请参阅：https：//support.google.com/webmasters/answer/139066</span></div><div class="line"><span class="comment">#提示：在打开此标记之前，请记住在hexo _config.yml中设置您的URL（例如：url：http：//yourdomain.com）</span></div><div class="line"><span class="attr">canonical:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.</span></div><div class="line"><span class="comment">#更改网站字幕上的标题层次结构（将是主要网站描述）和所有帖子/页面标题，以便更好地进行SEO优化。</span></div><div class="line"><span class="attr">seo:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># If true, will add site-subtitle to index page, added in main hexo config.</span></div><div class="line"><span class="comment">#如果为true，则将site-subtitle添加到索引页面，添加到主hexo配置中。</span></div><div class="line"><span class="comment"># subtitle: Subtitle</span></div><div class="line"><span class="attr">index_with_subtitle:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Menu Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -&gt; archives).</span></div><div class="line"><span class="comment"># Usage: `Key: /link/ || icon`</span></div><div class="line"><span class="comment"># Key is the name of menu item. If translate for this menu will find in languages - this translate will be loaded; if not - Key name will be used. Key is case-senstive.</span></div><div class="line"><span class="comment"># Value before `||` delimeter is the target link.</span></div><div class="line"><span class="comment"># Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, question icon will be loaded.</span></div><div class="line"><span class="comment"># 菜单设置 || 菜单图标设置（图标上面说了，不重复）</span></div><div class="line"><span class="comment"># 项目换行可以更改显示顺序</span></div><div class="line"><span class="comment"># 如果这个项前会显示 .menu</span></div><div class="line"><span class="comment"># 解决方法：编辑 ~/blog/themes/next/languages 下的相应文件</span></div><div class="line"><span class="comment"># 比如添加一个“留言”菜单，站点配置文件的 language 是 zh-Hans</span></div><div class="line"><span class="comment"># 则编辑 zh-Hans.yml，在 menu: 项内添加一行 留言: 留言</span></div><div class="line"><span class="comment"># 注意空格，且符号 : 为英文字符！</span></div><div class="line"><span class="attr">menu:</span></div><div class="line"><span class="attr">  home:</span> <span class="string">/</span> <span class="string">||</span> <span class="string">home</span></div><div class="line"><span class="attr">  Hexo:</span> <span class="string">/categories/Hexo</span> <span class="string">||</span> <span class="string">heading</span></div><div class="line"><span class="attr">  Linux:</span> <span class="string">/categories/Linux</span> <span class="string">||</span> <span class="string">linux</span></div><div class="line"><span class="attr">  learn:</span> <span class="string">/categories/learn</span> <span class="string">||</span> <span class="string">leanpub</span></div><div class="line"><span class="attr">  categories:</span> <span class="string">/categories/</span> <span class="string">||</span> <span class="string">th</span></div><div class="line"><span class="attr">  tags:</span> <span class="string">/tags/</span> <span class="string">||</span> <span class="string">tags</span></div><div class="line"><span class="attr">  archives:</span> <span class="string">/archives/</span> <span class="string">||</span> <span class="string">archive</span></div><div class="line"><span class="attr">  top:</span> <span class="string">/top/</span> <span class="string">||</span> <span class="string">signal</span></div><div class="line">  <span class="comment">#schedule: /schedule/ || calendar</span></div><div class="line"><span class="attr">  sitemap:</span> <span class="string">/sitemap.xml</span> <span class="string">||</span> <span class="string">sitemap</span></div><div class="line">  <span class="comment">#commonweal: /404/ || heartbeat</span></div><div class="line"><span class="attr">  about:</span> <span class="string">/about/</span> <span class="string">||</span> <span class="string">user</span></div><div class="line"></div><div class="line"><span class="comment"># Enable/Disable menu icons / item badges.</span></div><div class="line"><span class="comment"># 是否开启菜单图标</span></div><div class="line"><span class="attr">menu_settings:</span></div><div class="line"><span class="attr">  icons:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  badges:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Scheme Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># 设计板式，都长啥样，去 README 里面的链接里看看</span></div><div class="line"><span class="comment"># https://github.com/iissnan/hexo-theme-next#live-preview</span></div><div class="line"><span class="comment"># Schemes</span></div><div class="line"><span class="comment">#scheme: Muse</span></div><div class="line"><span class="comment">#scheme: Mist</span></div><div class="line"><span class="comment">#scheme: Pisces</span></div><div class="line"><span class="attr">scheme:</span> <span class="string">Gemini</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Sidebar Settings</span></div><div class="line"><span class="comment"># 边栏设置</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Posts / Categories / Tags in sidebar.</span></div><div class="line"><span class="comment"># 侧栏社交链接设置，与上面菜单差不多，要生效记得把前面的 # 去掉</span></div><div class="line"><span class="attr">site_state:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Social Links.</span></div><div class="line"><span class="comment"># Usage: `Key: permalink || icon`</span></div><div class="line"><span class="comment"># Key is the link label showing to end users.</span></div><div class="line"><span class="comment"># Value before `||` delimeter is the target permalink.</span></div><div class="line"><span class="comment"># Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.</span></div><div class="line"></div><div class="line"><span class="attr">social:</span></div><div class="line"><span class="attr">  GitHub:</span> <span class="attr">https://github.com/yszar</span> <span class="string">||</span> <span class="string">github</span></div><div class="line"><span class="attr">  E-Mail:</span> <span class="attr">mailto:yszar@vip.qq.com</span> <span class="string">||</span> <span class="string">envelope</span></div><div class="line">  <span class="comment">#Google: https://plus.google.com/yourname || google</span></div><div class="line">  <span class="comment">#Twitter: https://twitter.com/yourname || twitter</span></div><div class="line">  <span class="comment">#FB Page: https://www.facebook.com/yourname || facebook</span></div><div class="line">  <span class="comment">#VK Group: https://vk.com/yourname || vk</span></div><div class="line">  <span class="comment">#StackOverflow: https://stackoverflow.com/yourname || stack-overflow</span></div><div class="line">  <span class="comment">#YouTube: https://youtube.com/yourname || youtube</span></div><div class="line">  <span class="comment">#Instagram: https://instagram.com/yourname || instagram</span></div><div class="line">  <span class="comment">#Skype: skype:yourname?call|chat || skype</span></div><div class="line"></div><div class="line"><span class="comment"># 侧栏社交链接图标设置</span></div><div class="line"><span class="attr">social_icons:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  icons_only:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  transition:</span> <span class="literal">false</span></div><div class="line">  <span class="comment"># Dependencies: exturl: true in Tags Settings section below.</span></div><div class="line">  <span class="comment"># To encrypt links above use https://www.base64encode.org</span></div><div class="line">  <span class="comment"># Example encoded link: `GitHub: aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQ= || github`</span></div><div class="line"><span class="attr">  exturl:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Follow me on GitHub banner in right-top corner.</span></div><div class="line"><span class="comment"># Usage: `permalink || title`</span></div><div class="line"><span class="comment"># Value before `||` delimeter is the target permalink.</span></div><div class="line"><span class="comment"># Value after `||` delimeter is the title and aria-label name.</span></div><div class="line"><span class="comment">#github_banner: https://github.com/yourname || Follow me on GitHub</span></div><div class="line"></div><div class="line"><span class="comment"># Blog rolls</span></div><div class="line"><span class="comment"># 侧栏友链设置</span></div><div class="line"><span class="attr">links_icon:</span> <span class="string">link</span></div><div class="line"><span class="attr">links_title:</span> <span class="string">Links</span></div><div class="line"><span class="attr">links_layout:</span> <span class="string">block</span></div><div class="line"><span class="comment">#links_layout: inline</span></div><div class="line"><span class="comment">#links:</span></div><div class="line">  <span class="comment">#Title: http://example.com/</span></div><div class="line"></div><div class="line"><span class="comment"># Sidebar Avatar</span></div><div class="line"><span class="comment"># 侧栏头像设置</span></div><div class="line"><span class="comment"># 建议放在 hexo-site/source/uploads/ 里（没有自己建）</span></div><div class="line"><span class="comment"># 这样可以避免更新 NexT 主题的时候遇到麻烦avatar:</span></div><div class="line">  <span class="comment"># in theme directory(source/images): /images/avatar.gif</span></div><div class="line">  <span class="comment"># in site  directory(source/uploads): /uploads/avatar.gif</span></div><div class="line">  <span class="comment"># You can also use other linking images.</span></div><div class="line">  <span class="comment">#在主题目录中（source/images）：/ images / avatar.gif</span></div><div class="line"><span class="attr">  url:</span> <span class="comment">#/images/avatar.gif</span></div><div class="line">  <span class="comment"># If true, the avatar would be dispalyed in circle.</span></div><div class="line">  <span class="comment">#如果为true，则头像将以圆圈显示。</span></div><div class="line"><span class="attr">  rounded:</span> <span class="literal">false</span></div><div class="line">  <span class="comment"># The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.</span></div><div class="line">  <span class="comment">#不透明度的值应从0到1中选择以设置头像的不透明度。</span></div><div class="line"><span class="attr">  opacity:</span> <span class="number">1</span></div><div class="line">  <span class="comment"># If true, the avatar would be rotated with the cursor.</span></div><div class="line">  <span class="comment">#头像旋转设置</span></div><div class="line"><span class="attr">  rotated:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Table Of Contents in the Sidebar</span></div><div class="line"><span class="attr">toc:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Automatically add list number to toc.</span></div><div class="line">  <span class="comment"># 自动加数字序号</span></div><div class="line"><span class="attr">  number:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># If true, all words will placed on next lines if header width longer then sidebar width.</span></div><div class="line">  <span class="comment"># 如果标题太长，则放到下一行继续显示</span></div><div class="line"><span class="attr">  wrap:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Creative Commons 4.0 International License.</span></div><div class="line"><span class="comment"># http://creativecommons.org/</span></div><div class="line"><span class="comment"># Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero</span></div><div class="line"><span class="attr">creative_commons:</span> <span class="string">by-nc-sa</span></div><div class="line"><span class="comment">#creative_commons:</span></div><div class="line"></div><div class="line"><span class="attr">sidebar:</span></div><div class="line">  <span class="comment"># Sidebar Position, available value: left | right (only for Pisces | Gemini).</span></div><div class="line">  <span class="comment"># 侧栏位置设置，可用值：左 | 右（只对 Pisces 和 Gemini 设计版式有效！）</span></div><div class="line"><span class="attr">  position:</span> <span class="string">left</span></div><div class="line">  <span class="comment">#position: right</span></div><div class="line"></div><div class="line">  <span class="comment"># Manual define the sidebar width.</span></div><div class="line">  <span class="comment"># If commented, will be default for:</span></div><div class="line">  <span class="comment"># Muse | Mist: 320</span></div><div class="line">  <span class="comment"># Pisces | Gemini: 240</span></div><div class="line">  <span class="comment">#width: 300</span></div><div class="line"></div><div class="line">  <span class="comment"># Sidebar Display, available value (only for Muse | Mist):</span></div><div class="line">  <span class="comment">#  - post    expand on posts automatically. Default.</span></div><div class="line">  <span class="comment">#  - always  expand for all pages automatically</span></div><div class="line">  <span class="comment">#  - hide    expand only when click on the sidebar toggle icon.</span></div><div class="line">  <span class="comment">#  - remove  Totally remove sidebar including sidebar toggle.</span></div><div class="line">  <span class="comment"># 侧栏显示方式，post 代表只有点进一篇文章内</span></div><div class="line">  <span class="comment"># 且文章有目录，侧栏才会弹出显示</span></div><div class="line">  <span class="comment">#display: post</span></div><div class="line"><span class="attr">  display:</span> <span class="string">always</span></div><div class="line">  <span class="comment">#display: hide</span></div><div class="line">  <span class="comment">#display: remove</span></div><div class="line"></div><div class="line">  <span class="comment"># Sidebar offset from top menubar in pixels (only for Pisces | Gemini).</span></div><div class="line">  <span class="comment"># 只对 Pisces 和 Gemini 设计版式有效！</span></div><div class="line"><span class="attr">  offset:</span> <span class="number">12</span></div><div class="line"></div><div class="line">  <span class="comment"># Back to top in sidebar (only for Pisces | Gemini).</span></div><div class="line">  <span class="comment"># 只对 Pisces 和 Gemini 设计版式有效！</span></div><div class="line"></div><div class="line"><span class="attr">  b2t:</span> <span class="literal">false</span></div><div class="line"></div><div class="line">  <span class="comment"># Scroll percent label in b2t button.</span></div><div class="line">  <span class="comment"># 在回到顶部按钮里显示阅读百分比</span></div><div class="line"></div><div class="line"><span class="attr">  scrollpercent:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Enable sidebar on narrow view (only for Muse | Mist).</span></div><div class="line">  <span class="comment"># 移动端显示侧栏，只对 Muse 和 Mist 设计版式有效！</span></div><div class="line"></div><div class="line"><span class="attr">  onmobile:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Post Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Automatically scroll page to section which is under &lt;!-- more --&gt; mark.</span></div><div class="line"><span class="comment"># 点击 [Read More]，页面自动滚动到 &lt;!-- more --&gt; 标记处</span></div><div class="line"><span class="attr">scroll_to_more:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Automatically saving scroll position on each post/page in cookies.</span></div><div class="line"><span class="comment"># 用 cookies 保存浏览的位置信息，意味着重新打开这个页面后</span></div><div class="line"><span class="comment"># 页面就会自动滚动到上次的位置，除非读者清理浏览器 cookies</span></div><div class="line"><span class="attr">save_scroll:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Automatically excerpt description in homepage as preamble text.</span></div><div class="line"><span class="comment"># 将每篇文章 Front-matter 里 description 的文字作为页面显示的文章摘要</span></div><div class="line"><span class="attr">excerpt_description:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Automatically Excerpt. Not recommend.</span></div><div class="line"><span class="comment"># Please use &lt;!-- more --&gt; in the post to control excerpt accurately.</span></div><div class="line"><span class="comment"># 按字数自动加入 [Read More]，不建议！</span></div><div class="line"><span class="comment"># 建议在文章中加入 &lt;!-- more --&gt;</span></div><div class="line"><span class="comment"># 自定义 [Read More] 按钮之前要显示的内容！</span></div><div class="line"><span class="attr">auto_excerpt:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  length:</span> <span class="number">150</span></div><div class="line"></div><div class="line"><span class="comment"># Post meta display settings</span></div><div class="line"><span class="comment"># 文章顶部显示的文章元数据设置</span></div><div class="line"><span class="attr">post_meta:</span></div><div class="line"><span class="attr">  item_text:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  created_at:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  updated_at:</span></div><div class="line"><span class="attr">    enabled:</span> <span class="literal">true</span></div><div class="line">    <span class="comment"># If true, show updated date label only if `updated date` different from 'created date' (post edited in another day than was created).</span></div><div class="line">    <span class="comment"># And if post will edited in same day as created, edited time will show in popup title under created time label.</span></div><div class="line">    <span class="comment"># If false show anyway, but if post edited in same day, show only edited time.</span></div><div class="line"><span class="attr">    another_day:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  categories:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Post wordcount display settings</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-symbols-count-time</span></div><div class="line"><span class="attr">symbols_count_time:</span></div><div class="line"><span class="attr">  separated_meta:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  item_text_post:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  item_text_total:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  awl:</span> <span class="number">4</span></div><div class="line"><span class="attr">  wpm:</span> <span class="number">275</span></div><div class="line"><span class="comment"># 显示统计字数和估计阅读时长</span></div><div class="line"><span class="comment"># 注意：这个要安装插件，先进入站点文件夹根目录</span></div><div class="line"><span class="comment"># 然后：npm install hexo-wordcount --save</span></div><div class="line"><span class="attr">post_wordcount:</span></div><div class="line"><span class="attr">  item_text:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  wordcount:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  min2read:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  totalcount:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  separated_meta:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Recommended posts</span></div><div class="line"> <span class="comment"># Dependency: https://github.com/huiwang/hexo-recommended-posts</span></div><div class="line"><span class="comment">#recommended_posts:</span></div><div class="line"><span class="comment">#  enabled: false</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="attr">codeblock:</span></div><div class="line">  <span class="comment"># Manual define the border radius in codeblock</span></div><div class="line">  <span class="comment"># Leave it empty for the default 1</span></div><div class="line"><span class="attr">  border_radius:</span></div><div class="line">  <span class="comment"># Add copy button on codeblock</span></div><div class="line"><span class="attr">  copy_button:</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">false</span></div><div class="line">    <span class="comment"># Show text copy result</span></div><div class="line"><span class="attr">    show_result:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Wechat Subscriber</span></div><div class="line"><span class="attr">wechat_subscriber:</span></div><div class="line"><span class="attr">  enabled:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  qcode:</span> <span class="string">/uploads/wechat-qcode.jpg</span></div><div class="line"><span class="attr">  description:</span> <span class="string">欢迎您扫一扫上面的微信公众号，订阅我的博客！</span></div><div class="line"></div><div class="line"><span class="comment"># Reward</span></div><div class="line"><span class="attr">reward_comment:</span> <span class="string">坚持原创技术分享，您的支持将鼓励我继续创作！</span></div><div class="line"><span class="attr">wechatpay:</span> <span class="string">/uploads/wxfk.png</span></div><div class="line"><span class="attr">alipay:</span> <span class="string">/uploads/zfbfk.png</span></div><div class="line"><span class="comment">#bitcoin: /images/bitcoin.png</span></div><div class="line"></div><div class="line"><span class="comment"># Related popular posts</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/tea3/hexo-related-popular-posts</span></div><div class="line"><span class="attr">related_posts:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  title:</span> <span class="string">热门文章#</span> <span class="string">custom</span> <span class="string">header,</span> <span class="string">leave</span> <span class="string">empty</span> <span class="string">to</span> <span class="string">use</span> <span class="string">the</span> <span class="string">default</span> <span class="string">one</span></div><div class="line"><span class="attr">  display_in_home:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  params:</span></div><div class="line"><span class="attr">    maxCount:</span> <span class="number">5</span></div><div class="line"><span class="attr">    PPMixingRate:</span> <span class="number">0.2</span></div><div class="line">    <span class="comment">#isDate: false</span></div><div class="line">    <span class="comment">#isImage: false</span></div><div class="line">    <span class="comment">#isExcerpt: false</span></div><div class="line"></div><div class="line"><span class="comment"># Declare license on posts</span></div><div class="line"><span class="attr">post_copyright:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line">  <span class="comment">#license: CC BY-NC-SA 3.0</span></div><div class="line">  <span class="comment">#license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/</span></div><div class="line"><span class="attr">  license:</span> <span class="string">&lt;a</span> <span class="string">href="https://creativecommons.org/licenses/by-nc-sa/4.0/"</span> <span class="string">rel="external</span> <span class="string">nofollow"</span> <span class="string">target="_blank"&gt;CC</span> <span class="string">BY-NC-SA</span> <span class="number">4.0</span><span class="string">&lt;/a&gt;</span></div><div class="line"></div><div class="line"><span class="comment"># Post edit</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/hexojs/hexo-deployer-git</span></div><div class="line"><span class="attr">post_edit:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  url:</span> <span class="attr">https://github.com/theme-next/theme-next.org/_posts/tree/master/</span> <span class="comment"># Link for view source.</span></div><div class="line"><span class="comment"># url: https://github.com/theme-next/theme-next.org/_posts/edit/master/ # Link for fork &amp; edit.</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Misc Theme Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Reduce padding / margin indents on devices with narrow width.</span></div><div class="line"><span class="attr">mobile_layout_economy:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Android Chrome header panel color ($brand-bg / $headband-bg =&gt; $black-deep).</span></div><div class="line"><span class="attr">android_chrome_color:</span> <span class="string">"#222"</span></div><div class="line"></div><div class="line"><span class="comment"># Custom Logo.</span></div><div class="line"><span class="comment"># !!Only available for Default Scheme currently.</span></div><div class="line"><span class="comment"># Options:</span></div><div class="line"><span class="comment">#   enabled: [true/false] - Replace with specific image</span></div><div class="line"><span class="comment">#   image: url-of-image   - Images's url</span></div><div class="line"><span class="attr">custom_logo:</span></div><div class="line"><span class="attr">  enabled:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  image:</span></div><div class="line"></div><div class="line"><span class="comment"># Code Highlight theme</span></div><div class="line"><span class="comment"># Available values: normal | night | night eighties | night blue | night bright</span></div><div class="line"><span class="comment"># https://github.com/chriskempson/tomorrow-theme</span></div><div class="line"><span class="attr">highlight_theme:</span> <span class="string">normal</span></div><div class="line"></div><div class="line"><span class="comment"># Enable "cheers" for archive page.</span></div><div class="line"><span class="attr">cheers_enabled:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Font Settings</span></div><div class="line"><span class="comment"># - Find fonts on Google Fonts (https://www.google.com/fonts)</span></div><div class="line"><span class="comment"># - All fonts set here will have the following styles:</span></div><div class="line"><span class="comment">#     light, light italic, normal, normal italic, bold, bold italic</span></div><div class="line"><span class="comment"># - Be aware that setting too much fonts will cause site running slowly</span></div><div class="line"><span class="comment"># - Introduce in 5.0.1</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># CAUTION! Safari Version 10.1.2 bug: https://github.com/iissnan/hexo-theme-next/issues/1844</span></div><div class="line"><span class="comment"># To avoid space between header and sidebar in Pisces / Gemini themes recommended to use Web Safe fonts for `global` (and `logo`):</span></div><div class="line"><span class="comment"># Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="attr">font:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Uri of fonts host. E.g. //fonts.googleapis.com (Default).</span></div><div class="line"><span class="attr">  host:</span> <span class="attr">https://fonts.cat.net</span></div><div class="line"></div><div class="line">  <span class="comment"># Font options:</span></div><div class="line">  <span class="comment"># `external: true` will load this font family from `host` above.</span></div><div class="line">  <span class="comment"># `family: Times New Roman`. Without any quotes.</span></div><div class="line">  <span class="comment"># `size: xx`. Use `px` as unit.</span></div><div class="line"></div><div class="line">  <span class="comment"># Global font settings used for all elements in &lt;body&gt;.</span></div><div class="line"><span class="attr">  global:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Lato</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Headlines (H1, H2, H3, H4, H5, H6).</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  headings:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Roboto</span> <span class="string">Slab</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for posts.</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  posts:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Logo.</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  logo:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for &lt;code&gt; and code blocks.</span></div><div class="line"><span class="attr">  codes:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Roboto</span> <span class="string">Mono</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Third Party Services Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Math Equations Render Support</span></div><div class="line"><span class="attr">math:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"></div><div class="line">  <span class="comment"># Default(true) will load mathjax/katex script on demand</span></div><div class="line">  <span class="comment"># That is it only render those page who has 'mathjax: true' in Front Matter.</span></div><div class="line">  <span class="comment"># If you set it to false, it will load mathjax/katex srcipt EVERY PAGE.</span></div><div class="line"><span class="attr">  per_page:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">  engine:</span> <span class="string">mathjax</span></div><div class="line">  <span class="comment">#engine: katex</span></div><div class="line"></div><div class="line">  <span class="comment"># hexo-rendering-pandoc (or hexo-renderer-kramed) needed to full MathJax support.</span></div><div class="line"><span class="attr">mathjax:</span></div><div class="line">    <span class="comment"># Use 2.7.1 as default, jsdelivr as default CDN, works everywhere even in China</span></div><div class="line"><span class="attr">    cdn:</span> <span class="string">//cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML</span></div><div class="line">    <span class="comment"># For newMathJax CDN (cdnjs.cloudflare.com) with fallback to oldMathJax (cdn.mathjax.org).</span></div><div class="line">    <span class="comment">#cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML</span></div><div class="line">    <span class="comment"># For direct link to MathJax.js with CloudFlare CDN (cdnjs.cloudflare.com).</span></div><div class="line">    <span class="comment">#cdn: //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML</span></div><div class="line">    <span class="comment"># For automatic detect latest version link to MathJax.js and get from Bootcss.</span></div><div class="line">    <span class="comment">#cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML</span></div><div class="line"></div><div class="line">  <span class="comment"># hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin)</span></div><div class="line">  <span class="comment"># needed to full Katex support.</span></div><div class="line"><span class="attr">katex:</span></div><div class="line">    <span class="comment"># Use 0.7.1 as default, jsdelivr as default CDN, works everywhere even in China</span></div><div class="line"><span class="attr">    cdn:</span> <span class="string">//cdn.jsdelivr.net/npm/katex@0.7.1/dist/katex.min.css</span></div><div class="line">    <span class="comment"># CDNJS, provided by cloudflare, maybe the best CDN, but not works in China</span></div><div class="line">    <span class="comment">#cdn: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css</span></div><div class="line">    <span class="comment"># Bootcss, works great in China, but not so well in other region</span></div><div class="line">    <span class="comment">#cdn: //cdn.bootcss.com/KaTeX/0.7.1/katex.min.css</span></div><div class="line"></div><div class="line"><span class="comment"># Han Support</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-han</span></div><div class="line"><span class="attr">han:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Pangu Support</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-pangu</span></div><div class="line"><span class="comment"># For more information: https://github.com/vinta/pangu.js</span></div><div class="line"><span class="attr">pangu:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Swiftype Search API Key</span></div><div class="line"><span class="comment">#swiftype_key:</span></div><div class="line"></div><div class="line"><span class="comment"># Baidu Analytics ID</span></div><div class="line"><span class="attr">baidu_analytics:</span> <span class="number">07</span><span class="string">b2f6778635ec267ee2b4753e118da9</span></div><div class="line"></div><div class="line"><span class="comment"># Disqus</span></div><div class="line"><span class="attr">disqus:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  shortname:</span></div><div class="line"><span class="attr">  count:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  lazyload:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># changyan</span></div><div class="line"><span class="attr">changyan:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  appid:</span></div><div class="line"><span class="attr">  appkey:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Valine.</span></div><div class="line"><span class="comment"># You can get your appid and appkey from https://leancloud.cn</span></div><div class="line"><span class="comment"># more info please open https://valine.js.org</span></div><div class="line"><span class="attr">valine:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span> <span class="comment"># When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.</span></div><div class="line"><span class="attr">  appid:</span></div><div class="line"><span class="attr">  appkey:</span></div><div class="line"><span class="attr">  notify:</span> <span class="literal">true</span> <span class="comment"># mail notifier , https://github.com/xCss/Valine/wiki</span></div><div class="line"><span class="attr">  verify:</span> <span class="literal">false</span> <span class="comment"># Verification code</span></div><div class="line"><span class="attr">  placeholder:</span> <span class="string">既然来了，那就说点啥吧！</span> <span class="comment"># comment box placeholder</span></div><div class="line"><span class="attr">  avatar:</span> <span class="string">mm</span> <span class="comment"># gravatar style</span></div><div class="line"><span class="attr">  guest_info:</span> <span class="string">nick,mail,link</span> <span class="comment"># custom comment header</span></div><div class="line"><span class="attr">  pageSize:</span> <span class="number">10</span> <span class="comment"># pagination size</span></div><div class="line"><span class="attr">  visitor:</span> <span class="literal">false</span> <span class="comment"># leancloud-counter-security is not supported for now. When visitor is set to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. Article reading statistic https://valine.js.org/visitor.html</span></div><div class="line"></div><div class="line"><span class="comment"># Support for LiveRe comments system.</span></div><div class="line"><span class="comment"># You can get your uid from https://livere.com/insight/myCode (General web site)</span></div><div class="line"><span class="comment">#livere_uid: MTAyMC80MDAyMC8xNjU0Nw==</span></div><div class="line"></div><div class="line"><span class="comment"># Gitment</span></div><div class="line"><span class="comment"># Introduction: https://imsun.net/posts/gitment-introduction/</span></div><div class="line"><span class="attr">gitment:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  mint:</span> <span class="literal">true</span> <span class="comment"># RECOMMEND, A mint on Gitment, to support count, language and proxy_gateway</span></div><div class="line"><span class="attr">  count:</span> <span class="literal">true</span> <span class="comment"># Show comments count in post meta area</span></div><div class="line"><span class="attr">  lazy:</span> <span class="literal">false</span> <span class="comment"># Comments lazy loading with a button</span></div><div class="line"><span class="attr">  cleanly:</span> <span class="literal">false</span> <span class="comment"># Hide 'Powered by ...' on footer, and more</span></div><div class="line"><span class="attr">  language:</span> <span class="comment"># Force language, or auto switch by theme</span></div><div class="line"><span class="attr">  github_user:</span> <span class="comment"># MUST HAVE, Your Github Username</span></div><div class="line"><span class="attr">  github_repo:</span> <span class="comment"># MUST HAVE, The name of the repo you use to store Gitment comments</span></div><div class="line"><span class="attr">  client_id:</span> <span class="comment"># MUST HAVE, Github client id for the Gitment</span></div><div class="line"><span class="attr">  client_secret:</span> <span class="comment"># EITHER this or proxy_gateway, Github access secret token for the Gitment</span></div><div class="line"><span class="attr">  proxy_gateway:</span> <span class="comment"># Address of api proxy, See: https://github.com/aimingoo/intersect</span></div><div class="line"><span class="attr">  redirect_protocol:</span> <span class="comment"># Protocol of redirect_uri with force_redirect_protocol when mint enabled</span></div><div class="line"></div><div class="line"><span class="comment"># Baidu Share</span></div><div class="line"><span class="comment"># Available value:</span></div><div class="line"><span class="comment">#    button | slide</span></div><div class="line"><span class="comment"># Warning: Baidu Share does not support https.</span></div><div class="line"><span class="comment">#baidushare:</span></div><div class="line"><span class="comment">##  type: button</span></div><div class="line"></div><div class="line"><span class="comment"># addthis Share, see: https://www.addthis.com/</span></div><div class="line"><span class="comment">#add_this_id:</span></div><div class="line"></div><div class="line"><span class="comment"># NeedMoreShare2</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-needmoreshare2</span></div><div class="line"><span class="comment"># See: https://github.com/revir/need-more-share2</span></div><div class="line"><span class="comment"># Also see: https://github.com/DzmVasileusky/needShareButton</span></div><div class="line"><span class="comment"># iconStyle: default | box</span></div><div class="line"><span class="comment"># boxForm: horizontal | vertical</span></div><div class="line"><span class="comment"># position: top / middle / bottom + Left / Center / Right</span></div><div class="line"><span class="comment"># networks: Weibo,Wechat,Douban,QQZone,Twitter,Linkedin,Mailto,Reddit,</span></div><div class="line"><span class="comment">#           Delicious,StumbleUpon,Pinterest,Facebook,GooglePlus,Slashdot,</span></div><div class="line"><span class="comment">#           Technorati,Posterous,Tumblr,GoogleBookmarks,Newsvine,</span></div><div class="line"><span class="comment">#           Evernote,Friendfeed,Vkontakte,Odnoklassniki,Mailru</span></div><div class="line"><span class="attr">needmoreshare2:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  postbottom:</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">    options:</span></div><div class="line"><span class="attr">      iconStyle:</span> <span class="string">box</span></div><div class="line"><span class="attr">      boxForm:</span> <span class="string">horizontal</span></div><div class="line"><span class="attr">      position:</span> <span class="string">bottomCenter</span></div><div class="line"><span class="attr">      networks:</span> <span class="string">Weibo,Wechat,Douban,QQZone,Twitter,Facebook</span></div><div class="line"><span class="attr">  float:</span></div><div class="line"><span class="attr">    enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">    options:</span></div><div class="line"><span class="attr">      iconStyle:</span> <span class="string">box</span></div><div class="line"><span class="attr">      boxForm:</span> <span class="string">horizontal</span></div><div class="line"><span class="attr">      position:</span> <span class="string">middleRight</span></div><div class="line"><span class="attr">      networks:</span> <span class="string">Weibo,Wechat,Douban,QQZone,Twitter,Facebook</span></div><div class="line"></div><div class="line"><span class="comment"># Google Webmaster tools verification setting</span></div><div class="line"><span class="comment"># See: https://www.google.com/webmasters/</span></div><div class="line"><span class="attr">google_site_verification:</span> <span class="string">zrNUWIf25v2J4dC1wliso_DUXEwYoECv4j3h9CE34xM</span></div><div class="line"></div><div class="line"><span class="comment"># Google Analytics</span></div><div class="line"><span class="attr">google_analytics:</span> <span class="string">UA-126970002-1</span></div><div class="line"></div><div class="line"><span class="comment"># Bing Webmaster tools verification setting</span></div><div class="line"><span class="comment"># See: https://www.bing.com/webmaster/</span></div><div class="line"><span class="comment">#bing_site_verification:</span></div><div class="line"></div><div class="line"><span class="comment"># Yandex Webmaster tools verification setting</span></div><div class="line"><span class="comment"># See: https://webmaster.yandex.ru/</span></div><div class="line"><span class="comment">#yandex_site_verification:</span></div><div class="line"></div><div class="line"><span class="comment"># Baidu Webmaster tools verification setting</span></div><div class="line"><span class="comment"># See: https://ziyuan.baidu.com/site/</span></div><div class="line"><span class="attr">baidu_site_verification:</span> <span class="string">nuHze5uXZ7</span></div><div class="line"></div><div class="line"><span class="comment"># CNZZ count</span></div><div class="line"><span class="comment">#cnzz_siteid:</span></div><div class="line"></div><div class="line"><span class="comment"># Application Insights</span></div><div class="line"><span class="comment"># See https://azure.microsoft.com/en-us/services/application-insights/</span></div><div class="line"><span class="comment"># application_insights:</span></div><div class="line"></div><div class="line"><span class="comment"># Post widgets &amp; FB/VK comments settings.</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Facebook SDK Support.</span></div><div class="line"><span class="comment"># https://github.com/iissnan/hexo-theme-next/pull/410</span></div><div class="line"><span class="attr">facebook_sdk:</span></div><div class="line"><span class="attr">  enable:</span>       <span class="literal">false</span></div><div class="line"><span class="attr">  app_id:</span>       <span class="comment">#&lt;app_id&gt;</span></div><div class="line"><span class="attr">  fb_admin:</span>     <span class="comment">#&lt;user_id&gt;</span></div><div class="line"><span class="attr">  like_button:</span>  <span class="comment">#true</span></div><div class="line"><span class="attr">  webmaster:</span>    <span class="comment">#true</span></div><div class="line"></div><div class="line"><span class="comment"># Facebook comments plugin</span></div><div class="line"><span class="comment"># This plugin depends on Facebook SDK.</span></div><div class="line"><span class="comment"># If facebook_sdk.enable is false, Facebook comments plugin is unavailable.</span></div><div class="line"><span class="attr">facebook_comments_plugin:</span></div><div class="line"><span class="attr">  enable:</span>       <span class="literal">false</span></div><div class="line"><span class="attr">  num_of_posts:</span> <span class="number">10</span>    <span class="comment"># min posts num is 1</span></div><div class="line"><span class="attr">  width:</span>        <span class="number">100</span><span class="string">%</span>  <span class="comment"># default width is 550px</span></div><div class="line"><span class="attr">  scheme:</span>       <span class="string">light</span> <span class="comment"># default scheme is light (light or dark)</span></div><div class="line"></div><div class="line"><span class="comment"># VKontakte API Support.</span></div><div class="line"><span class="comment"># To get your AppID visit https://vk.com/editapp?act=create</span></div><div class="line"><span class="attr">vkontakte_api:</span></div><div class="line"><span class="attr">  enable:</span>       <span class="literal">false</span></div><div class="line"><span class="attr">  app_id:</span>       <span class="comment">#&lt;app_id&gt;</span></div><div class="line"><span class="attr">  like:</span>         <span class="literal">true</span></div><div class="line"><span class="attr">  comments:</span>     <span class="literal">true</span></div><div class="line"><span class="attr">  num_of_posts:</span> <span class="number">10</span></div><div class="line"></div><div class="line"><span class="comment"># Star rating support to each article.</span></div><div class="line"><span class="comment"># To get your ID visit https://widgetpack.com</span></div><div class="line"><span class="attr">rating:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  id:</span>     <span class="comment">#&lt;app_id&gt;</span></div><div class="line"><span class="attr">  color:</span>  <span class="string">fc6423</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Show number of visitors to each article.</span></div><div class="line"><span class="comment"># You can visit https://leancloud.cn get AppID and AppKey.</span></div><div class="line"><span class="attr">leancloud_visitors:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  app_id:</span> <span class="string">iUS887d8BnkY3Gqc9FJX70fE-gzGzoHsz</span></div><div class="line"><span class="attr">  app_key:</span> <span class="string">ekF4kKyQDgrDkIBadj3IDrVA</span></div><div class="line">  <span class="comment"># Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security</span></div><div class="line">  <span class="comment"># If you don't care about security in lc counter and just want to use it directly</span></div><div class="line">  <span class="comment"># (without hexo-leancloud-counter-security plugin), set the `security` to `false`.</span></div><div class="line"><span class="attr">  security:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  betterPerformance:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="attr">leancloud_counter_security:</span></div><div class="line"><span class="attr">  enable_sync:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  app_id:</span> <span class="string">iUS887d8BnkY3Gqc9FJX70fE-gzGzoHsz</span></div><div class="line"><span class="attr">  app_key:</span> <span class="string">ekF4kKyQDgrDkIBadj3IDrVA</span></div><div class="line"><span class="attr">  username:</span> <span class="string">yszar</span></div><div class="line"><span class="attr">  password:</span> <span class="string">andylau</span></div><div class="line"></div><div class="line"><span class="comment"># Another tool to show number of visitors to each article.</span></div><div class="line"><span class="comment"># visit https://console.firebase.google.com/u/0/ to get apiKey and projectId</span></div><div class="line"><span class="comment"># visit https://firebase.google.com/docs/firestore/ to get more information about firestore</span></div><div class="line"><span class="attr">firestore:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  collection:</span> <span class="string">articles</span> <span class="comment">#required, a string collection name to access firestore database</span></div><div class="line"><span class="attr">  apiKey:</span> <span class="comment">#required</span></div><div class="line"><span class="attr">  projectId:</span> <span class="comment">#required</span></div><div class="line"><span class="attr">  bluebird:</span> <span class="literal">false</span> <span class="comment">#enable this if you want to include bluebird 3.5.1(core version) Promise polyfill</span></div><div class="line"></div><div class="line"><span class="comment"># Show Views/Visitors of the website/page with busuanzi.</span></div><div class="line"><span class="comment"># Get more information on http://ibruce.info/2015/04/04/busuanzi/</span></div><div class="line"><span class="attr">busuanzi_count:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  total_visitors:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  total_visitors_icon:</span> <span class="string">user</span></div><div class="line"><span class="attr">  total_views:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  total_views_icon:</span> <span class="string">eye</span></div><div class="line"><span class="attr">  post_views:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  post_views_icon:</span> <span class="string">eye</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Tencent analytics ID</span></div><div class="line"><span class="comment"># tencent_analytics:</span></div><div class="line"></div><div class="line"><span class="comment"># Tencent MTA ID</span></div><div class="line"><span class="comment"># tencent_mta:</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO</span></div><div class="line"><span class="attr">baidu_push:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Google Calendar</span></div><div class="line"><span class="comment"># Share your recent schedule to others via calendar page</span></div><div class="line"><span class="comment">#</span></div><div class="line"><span class="comment"># API Documentation:</span></div><div class="line"><span class="comment"># https://developers.google.com/google-apps/calendar/v3/reference/events/list</span></div><div class="line"><span class="attr">calendar:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  calendar_id:</span> <span class="string">&lt;required&gt;</span></div><div class="line"><span class="attr">  api_key:</span> <span class="string">&lt;required&gt;</span></div><div class="line"><span class="attr">  orderBy:</span> <span class="string">startTime</span></div><div class="line"><span class="attr">  offsetMax:</span> <span class="number">24</span></div><div class="line"><span class="attr">  offsetMin:</span> <span class="number">4</span></div><div class="line"><span class="attr">  timeZone:</span></div><div class="line"><span class="attr">  showDeleted:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  singleEvents:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  maxResults:</span> <span class="number">250</span></div><div class="line"></div><div class="line"><span class="comment"># Algolia Search</span></div><div class="line"><span class="comment"># See: https://github.com/theme-next/hexo-theme-next/blob/master/docs/ALGOLIA-SEARCH.md</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-algolia-instant-search</span></div><div class="line"><span class="attr">algolia_search:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  hits:</span></div><div class="line"><span class="attr">    per_page:</span> <span class="number">10</span></div><div class="line"><span class="attr">  labels:</span></div><div class="line"><span class="attr">    input_placeholder:</span> <span class="string">Search</span> <span class="string">for</span> <span class="string">Posts</span></div><div class="line"><span class="attr">    hits_empty:</span> <span class="string">"We didn't find any results for the search: $&#123;query&#125;"</span></div><div class="line"><span class="attr">    hits_stats:</span> <span class="string">"$&#123;hits&#125; results found in $&#123;time&#125; ms"</span></div><div class="line"></div><div class="line"><span class="comment"># Local search</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/hexo-generator-searchdb</span></div><div class="line"><span class="comment"># 要安装插件才能使用，先进入站点文件夹根目录</span></div><div class="line"><span class="comment"># 然后：npm install hexo-generator-searchdb --save</span></div><div class="line"><span class="attr">local_search:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line">  <span class="comment"># if auto, trigger search by changing input</span></div><div class="line">  <span class="comment"># if manual, trigger search by pressing enter key or search button</span></div><div class="line"><span class="attr">  trigger:</span> <span class="string">auto</span></div><div class="line">  <span class="comment"># show top n results per article, show all results by setting to -1</span></div><div class="line"><span class="attr">  top_n_per_article:</span> <span class="number">1</span></div><div class="line">  <span class="comment"># unescape html strings to the readable one</span></div><div class="line"><span class="attr">  unescape:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Bookmark Support</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-bookmark</span></div><div class="line"><span class="attr">bookmark:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line">  <span class="comment"># if auto</span></div><div class="line">  <span class="comment">#   - save the reading position when closing the page</span></div><div class="line">  <span class="comment">#   - or clicking the bookmark-icon</span></div><div class="line">  <span class="comment"># if manual, only save it by clicking the bookmark-icon</span></div><div class="line"><span class="attr">  save:</span> <span class="string">auto</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"><span class="comment"># Tags Settings</span></div><div class="line"><span class="comment"># ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># External URL with BASE64 encrypt &amp; decrypt.</span></div><div class="line"><span class="comment"># Usage: &#123;% exturl text url "title" %&#125;</span></div><div class="line"><span class="comment"># Alias: &#123;% extlink text url "title" %&#125;</span></div><div class="line"><span class="attr">exturl:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Note tag (bs-callout).</span></div><div class="line"><span class="attr">note:</span></div><div class="line">  <span class="comment"># Note tag style values:</span></div><div class="line">  <span class="comment">#  - simple    bs-callout old alert style. Default.</span></div><div class="line">  <span class="comment">#  - modern    bs-callout new (v2-v3) alert style.</span></div><div class="line">  <span class="comment">#  - flat      flat callout style with background, like on Mozilla or StackOverflow.</span></div><div class="line">  <span class="comment">#  - disabled  disable all CSS styles import of note tag.</span></div><div class="line"><span class="attr">  style:</span> <span class="string">flat</span></div><div class="line"><span class="attr">  icons:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  border_radius:</span> <span class="number">3</span></div><div class="line">  <span class="comment"># Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).</span></div><div class="line">  <span class="comment"># Offset also applied to label tag variables. This option can work with disabled note tag.</span></div><div class="line"><span class="attr">  light_bg_offset:</span> <span class="number">0</span></div><div class="line"></div><div class="line"><span class="comment"># Label tag.</span></div><div class="line"><span class="attr">label:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Tabs tag.</span></div><div class="line"><span class="attr">tabs:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  transition:</span></div><div class="line"><span class="attr">    tabs:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    labels:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  border_radius:</span> <span class="number">0</span></div><div class="line"></div><div class="line"><span class="comment"># Reading progress bar</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-reading-progress</span></div><div class="line"><span class="attr">reading_progress:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  color:</span> <span class="string">"#37c6c0"</span></div><div class="line"><span class="attr">  height:</span> <span class="number">2</span><span class="string">px</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment">#! ---------------------------------------------------------------</span></div><div class="line"><span class="comment">#! DO NOT EDIT THE FOLLOWING SETTINGS</span></div><div class="line"><span class="comment">#! UNLESS YOU KNOW WHAT YOU ARE DOING</span></div><div class="line"><span class="comment">#! ---------------------------------------------------------------</span></div><div class="line"></div><div class="line"><span class="comment"># Use velocity to animate everything.</span></div><div class="line"><span class="attr">motion:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  async:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  transition:</span></div><div class="line">    <span class="comment"># Transition variants:</span></div><div class="line">    <span class="comment"># fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut</span></div><div class="line">    <span class="comment"># swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut</span></div><div class="line">    <span class="comment"># bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut</span></div><div class="line">    <span class="comment"># slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut</span></div><div class="line">    <span class="comment"># slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut</span></div><div class="line">    <span class="comment"># perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut</span></div><div class="line"><span class="attr">    post_block:</span> <span class="string">fadeIn</span></div><div class="line"><span class="attr">    post_header:</span> <span class="string">slideDownIn</span></div><div class="line"><span class="attr">    post_body:</span> <span class="string">slideDownIn</span></div><div class="line"><span class="attr">    coll_header:</span> <span class="string">slideLeftIn</span></div><div class="line">    <span class="comment"># Only for Pisces | Gemini.</span></div><div class="line"><span class="attr">    sidebar:</span> <span class="string">slideUpIn</span></div><div class="line"></div><div class="line"><span class="comment"># Fancybox. There is support for old version 2 and new version 3.</span></div><div class="line"><span class="comment"># Please, choose only any one variant, do not need to install both.</span></div><div class="line"><span class="comment"># For install 2.x: https://github.com/theme-next/theme-next-fancybox</span></div><div class="line"><span class="comment"># For install 3.x: https://github.com/theme-next/theme-next-fancybox3</span></div><div class="line"><span class="attr">fancybox:</span> <span class="literal">true</span></div><div class="line"></div><div class="line"><span class="comment"># Added switch option for separated repo in 6.0.0.</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-fastclick</span></div><div class="line"><span class="attr">fastclick:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Added switch option for separated repo in 6.0.0.</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload</span></div><div class="line"><span class="attr">lazyload:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Progress bar in the top during page loading.</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-pace</span></div><div class="line"><span class="comment"># 页面顶部加载条</span></div><div class="line"><span class="attr">pace:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># Themes list:</span></div><div class="line"><span class="comment">#pace-theme-big-counter</span></div><div class="line"><span class="comment">#pace-theme-bounce</span></div><div class="line"><span class="comment">#pace-theme-barber-shop</span></div><div class="line"><span class="comment">#pace-theme-center-atom</span></div><div class="line"><span class="comment">#pace-theme-center-circle</span></div><div class="line"><span class="comment">#pace-theme-center-radar</span></div><div class="line"><span class="comment">#pace-theme-center-simple</span></div><div class="line"><span class="comment">#pace-theme-corner-indicator</span></div><div class="line"><span class="comment">#pace-theme-fill-left</span></div><div class="line"><span class="comment">#pace-theme-flash</span></div><div class="line"><span class="comment">#pace-theme-loading-bar</span></div><div class="line"><span class="comment">#pace-theme-mac-osx</span></div><div class="line"><span class="comment">#pace-theme-minimal</span></div><div class="line"><span class="comment"># For example</span></div><div class="line"><span class="comment"># pace_theme: pace-theme-center-simple</span></div><div class="line"><span class="attr">pace_theme:</span> <span class="string">pace-theme-flash</span></div><div class="line"></div><div class="line"><span class="comment"># Canvas-nest</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-canvas-nest</span></div><div class="line"><span class="comment"># 动态背景</span></div><div class="line"><span class="attr">canvas_nest:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># JavaScript 3D library.</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-three</span></div><div class="line"><span class="comment"># three_waves</span></div><div class="line"><span class="attr">three_waves:</span> <span class="literal">false</span></div><div class="line"><span class="comment"># canvas_lines</span></div><div class="line"><span class="attr">canvas_lines:</span> <span class="literal">false</span></div><div class="line"><span class="comment"># canvas_sphere</span></div><div class="line"><span class="attr">canvas_sphere:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="comment"># Only fit scheme Pisces</span></div><div class="line"><span class="comment"># Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon</span></div><div class="line"><span class="comment"># Canvas-ribbon</span></div><div class="line"><span class="comment"># size: The width of the ribbon.</span></div><div class="line"><span class="comment"># alpha: The transparency of the ribbon.</span></div><div class="line"><span class="comment"># zIndex: The display level of the ribbon.</span></div><div class="line"><span class="attr">canvas_ribbon:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  size:</span> <span class="number">300</span></div><div class="line"><span class="attr">  alpha:</span> <span class="number">0.6</span></div><div class="line"><span class="attr">  zIndex:</span> <span class="bullet">-1</span></div><div class="line"></div><div class="line"><span class="comment"># Script Vendors.</span></div><div class="line"><span class="comment"># Set a CDN address for the vendor you want to customize.</span></div><div class="line"><span class="comment"># For example</span></div><div class="line"><span class="comment">#    jquery: https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js</span></div><div class="line"><span class="comment"># Be aware that you should use the same version as internal ones to avoid potential problems.</span></div><div class="line"><span class="comment"># Please use the https protocol of CDN files when you enable https on your site.</span></div><div class="line"><span class="comment"># 相关内容用 CDN 地址取代，加速网站访问，注意版本尽可能要一致</span></div><div class="line"><span class="attr">vendors:</span></div><div class="line">  <span class="comment"># Internal path prefix. Please do not edit it.</span></div><div class="line"><span class="attr">  _internal:</span> <span class="string">lib</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 2.1.3</span></div><div class="line"><span class="attr">  jquery:</span> <span class="string">//cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 2.1.5</span></div><div class="line">  <span class="comment"># See: http://fancyapps.com/fancybox/</span></div><div class="line"><span class="attr">  fancybox:</span> <span class="string">//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js</span></div><div class="line"><span class="attr">  fancybox_css:</span> <span class="string">//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.min.css</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.6</span></div><div class="line">  <span class="comment"># See: https://github.com/ftlabs/fastclick</span></div><div class="line"><span class="attr">  fastclick:</span> <span class="string">//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.9.7</span></div><div class="line">  <span class="comment"># See: https://github.com/tuupola/jquery_lazyload</span></div><div class="line"><span class="attr">  lazyload:</span> <span class="string">//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.2.1</span></div><div class="line">  <span class="comment"># See: http://VelocityJS.org</span></div><div class="line"><span class="attr">  velocity:</span> <span class="string">//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.2.1</span></div><div class="line">  <span class="comment"># See: http://VelocityJS.org</span></div><div class="line"><span class="attr">  velocity_ui:</span> <span class="string">//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 0.7.9</span></div><div class="line">  <span class="comment"># See: https://faisalman.github.io/ua-parser-js/</span></div><div class="line"><span class="attr">  ua_parser:</span> <span class="string">//cdn.jsdelivr.net/ua-parser.js/0.7.10/ua-parser.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 4.6.2</span></div><div class="line">  <span class="comment"># See: http://fontawesome.io/</span></div><div class="line"><span class="attr">  fontawesome:</span> <span class="string">//cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1</span></div><div class="line">  <span class="comment"># https://www.algolia.com</span></div><div class="line"><span class="attr">  algolia_instant_js:</span></div><div class="line"><span class="attr">  algolia_instant_css:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.2</span></div><div class="line">  <span class="comment"># See: https://github.com/HubSpot/pace</span></div><div class="line">  <span class="comment"># Or use direct links below:</span></div><div class="line">  <span class="comment"># pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js</span></div><div class="line">  <span class="comment"># pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css</span></div><div class="line"><span class="attr">  pace:</span> <span class="string">//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js</span></div><div class="line"><span class="attr">  pace_css:</span> <span class="string">//cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-flash.min.css</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.0</span></div><div class="line">  <span class="comment"># https://github.com/hustcc/canvas-nest.js</span></div><div class="line"><span class="attr">  canvas_nest:</span> <span class="string">//cdn.jsdelivr.net/npm/canvas@1.6.12/lib/canvas.min.js</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.0</span></div><div class="line">  <span class="comment"># See: https://github.com/theme-next/theme-next-three</span></div><div class="line">  <span class="comment"># three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three.min.js</span></div><div class="line">  <span class="comment"># three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/three-waves.min.js</span></div><div class="line">  <span class="comment"># canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_lines.min.js</span></div><div class="line">  <span class="comment"># canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1.0.0/canvas_sphere.min.js</span></div><div class="line"><span class="attr">  three:</span></div><div class="line"><span class="attr">  three_waves:</span></div><div class="line"><span class="attr">  canvas_lines:</span></div><div class="line"><span class="attr">  canvas_sphere:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 1.0.0</span></div><div class="line">  <span class="comment"># https://github.com/zproo/canvas-ribbon</span></div><div class="line"><span class="attr">  canvas_ribbon:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 3.3.0</span></div><div class="line">  <span class="comment"># https://github.com/ethantw/Han</span></div><div class="line"><span class="attr">  Han:</span></div><div class="line"></div><div class="line">  <span class="comment"># Internal version: 3.3.0</span></div><div class="line">  <span class="comment"># https://github.com/vinta/pangu.js</span></div><div class="line"><span class="attr">  pangu:</span></div><div class="line"></div><div class="line">  <span class="comment"># needMoreShare2</span></div><div class="line">  <span class="comment"># https://github.com/revir/need-more-share2</span></div><div class="line"><span class="attr">needmoreshare2_js:</span></div><div class="line"><span class="attr">  needmoreshare2_css:</span></div><div class="line"></div><div class="line">  <span class="comment"># bookmark</span></div><div class="line">  <span class="comment"># Internal version: 1.0.0</span></div><div class="line">  <span class="comment"># https://github.com/theme-next/theme-next-bookmark</span></div><div class="line"><span class="attr">  bookmark:</span></div><div class="line"></div><div class="line">  <span class="comment"># reading_progress</span></div><div class="line">  <span class="comment"># Internal version: 1.0</span></div><div class="line">  <span class="comment"># https://github.com/theme-next/theme-next-reading-progress</span></div><div class="line">  <span class="comment"># Example: https://cdn.jsdelivr.net/gh/theme-next/theme-next-reading-progress@1.1/reading_progress.min.js</span></div><div class="line"><span class="attr">  reading_progress:</span></div><div class="line"></div><div class="line">  <span class="comment"># valine comment</span></div><div class="line">  <span class="comment"># Example: https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js</span></div><div class="line"><span class="attr">  valine:</span> <span class="attr">https://cdn.jsdelivr.net/npm/valine@1.1.8/dist/Valine.min.js</span></div><div class="line"></div><div class="line"></div><div class="line"><span class="comment"># Assets</span></div><div class="line"><span class="attr">css:</span> <span class="string">css</span></div><div class="line"><span class="attr">js:</span> <span class="string">js</span></div><div class="line"><span class="attr">images:</span> <span class="string">images</span></div><div class="line"></div><div class="line"><span class="comment"># 文章末尾添加“本文结束”标记，请勿直接添加，教程链接：</span></div><div class="line"><span class="attr">passage_end_tag:</span></div><div class="line"><span class="attr">  enabled:</span> <span class="literal">true</span></div></pre></div></div></figure>
<div class="note primary"><p>如果里面有些设置你还想进一步自定义，比如进一步自定义页脚文字的顺序，继续往下看</p></div>

<h3 id="动态背景"><a href="#动态背景" class="headerlink" title="动态背景"></a>动态背景</h3><p>效果图：</p>
<p><img src="http://qn.codenote.pro/2018-10-05-23-56-43.gif" alt="2018-10-05-23-56-43.gif"></p>
<p>在主题配置文件中，靠后面，改<span class="label default">canvas_nest: true</span>，想要更改颜色和数量？修改文件：</p>
<figure class="highlight plain"><figcaption><span class="caption">文件位置</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">~/blog/themes/next/source/lib/canvas-nest/canvas-nest.min.js</div></pre></div></div></figure>
<p>怎么修改？参考 <a href="https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md" rel="external nofollow noopener noreferrer" target="_blank">README</a>。</p>
<h3 id="注脚"><a href="#注脚" class="headerlink" title="注脚"></a>注脚</h3><p>在 Hexo 插件搜索<span class="label default">footnotes</span>，发现目前有两种插件，右边的可以实现鼠标放在上面悬浮显示注释的功能，但是亲测有一个 Bug，有时对页面宽度有影响，强迫症难以忍受。</p>
<h4 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h4><div class="note info no-icon"><p>tip：Hexo 插件页面有很多不同功能的插件，可以自行尝试，说不定有惊喜。</p></div>

<p><img src="http://qn.codenote.pro/2018-10-06-00-25-42.jpg" alt="2018-10-06-00-25-42.jpg"></p>
<p>我安装的是左边的，先进入站点文件夹根目录，然后：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-footnotes --save</div></pre></div></div></figure>
<h4 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h4><p>效果：</p>
<p><img src="https://codenote.oss-cn-beijing.aliyuncs.com/screenshot.png" alt="1"></p>
<p>安装后按 <a href="https://github.com/LouisBarranqueiro/hexo-footnotes" rel="external nofollow noopener noreferrer" target="_blank">README</a> 的方法书写，应该就可以了。</p>
<div class="note warning"><p>注意：注脚的内容一定要放在 Markdown 文档的最后面，否则可能会有错误。</p></div>

<h2 id="优化-网页样式布局"><a href="#优化-网页样式布局" class="headerlink" title="优化 网页样式布局"></a>优化 网页样式布局</h2><p>发现页面有大量留白？颜色不合自己口味？那就 F12 开始吧，大换装开始！空白区？颜色？背景？圆角矩形？阴影？透明度？超链接样式？侧栏头像圆形并旋转？文章标题前面的竖线和颜色？只需按下 F12，改到自己想要的样式，然后 Copy 到<span class="label default">custom.styl</span>文件即可。</p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">~/blog/themes/next/<span class="built_in">source</span>/css/_custom/custom.styl</div></pre></div></div></figure>
<p>怎么知道要修改这个文件呢？强烈推荐阅读<a href="http://www.cduyzh.com/hexo-settings-3/" rel="external nofollow noopener noreferrer" target="_blank">2017年最新基于hexo搭建个人免费博客——自定义页面样式一</a>。</p>
<div class="note success"><p>感觉这是 NexT 主题非常棒的设计，因为这让我们能够很方便自定义博客的样式。</p></div>

<h3 id="怎么更改？"><a href="#怎么更改？" class="headerlink" title="怎么更改？"></a>怎么更改？</h3><p>浏览器按 F12 即可，建议用 <a href="http://down.tech.sina.com.cn/content/40975.html" rel="external nofollow noopener noreferrer" target="_blank">Google Chrome 浏览器</a>（有梯子的直接去 Google 下载），或者<a href="http://www.firefox.com.cn/download/" rel="external nofollow noopener noreferrer" target="_blank">火狐浏览器</a>。如果你按下 F12 后简直特么一脸懵逼，那么别急，硬着头皮慢慢折腾吧哈哈哈嗝～</p>
<div class="note info no-icon"><p>tip：hexo s后可以直接本地调试，也就是更改文件保存后，Hexo 后台会自动重新渲染文件，所以只要稍等片刻，浏览器刷新一下就能看到效果。</p></div>

<h4 id="快速由懵逼到熟悉"><a href="#快速由懵逼到熟悉" class="headerlink" title="快速由懵逼到熟悉"></a>快速由懵逼到熟悉</h4><p>首先按下 F12 后的操作流程图，就是这篇文章中的三步骤，点小箭头定位元素，调试 CSS 代码，最后 Copy 到<span class="label default">custom.styl</span>。</p>
<p>然后懵逼的地方，应该有下面两点：</p>
<ol>
<li>按下 F12 后弹出的界面是什么鬼？！</li>
<li>界面中的<span class="label default">{ }</span>前面的和里面的英文是什么鬼？！</li>
</ol>
<p>第一点：弹出的界面是为调试设计的，如果你知道调试的是啥，也许就自然了解弹出的界面，所以我不多说，不过还是给一份 Google 官方的资料——<a href="https://developers.google.com/web/tools/chrome-devtools/" rel="external nofollow noopener noreferrer" target="_blank">Chrome 开发者工具</a>。</p>
<p>第二点：<span class="label default">{ }</span>前面的是 HTML 的元素名，<span class="label default">{ }</span>里面的是这个元素的 CSS 样式。</p>
<p>社交要先有自己原则，一段代码要先声明变量，一个数学问题有前提，一篇论文要先定义名词，到这里我们也必须要先了解一些 HTML 和 CSS 的基本语法知识了，才能继续折腾下去。</p>
<p>建议先浏览下<a href="http://qianling.pw/grammar/" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>，但没必要记住里面的每一个语法知识，因为这样的记忆是不够深刻也并不高效的，只要浏览下留个印象（为了能找准元素）就行，而记忆是要在实践中记忆的。</p>
<h4 id="开始实践"><a href="#开始实践" class="headerlink" title="开始实践"></a>开始实践</h4><p>实践？对！就是打开自己的本地调试页面，然后用你挑剔的眼光看看，哪里让你不爽，就按 F12，定位元素，最后调试，直到改到自己满意。这不是与一开始说的三步骤一样吗，为啥现在又说一遍？</p>
<p>不不不，想想如果你点开一个俄文网站，然后我给你个这页面上的一个俄文链接的中文翻译，让你找到这个俄文链接并点开，你会不会懵逼呢……一样的，如果我没有让先你浏览 HTML 和 CSS 的基本语法知识，那么对网页中出现的东东大脑压根就“翻译”不成 HTML 和 CSS 代码（反之一样）。</p>
<p>对 HTML 和 CSS 的语法定义不明，就可能会找不准元素，而找不准元素不仅可能达不到预期效果，还可能会产生一些新的 bugs，所以要先浏览上面那篇文章。</p>
<p>这也是我这个小白走过的坑中，最大的一个了，花费了我不少时间在无意义的搜索上，想达到一个效果，但是不知道输入什么搜索关键字……</p>
<p><img align="right" src="https://codenote.oss-cn-beijing.aliyuncs.com/css.gif" style="float:right;height:120px;width:180px;margin-left:5px"></p>
<p>最后，要熟练还是要多折腾，给你右边这张图慢慢体会……喵？！多折腾，说好的快速呢！？快速是要有对比的，我填了定义不明这个大坑，你按我说的操作，与我的慢折腾经历相比，你的折腾当然是快速。</p>
<p>诡辩？好吧说实话也算是谎言，不过是个善意的谎言，只为给你一种神奇的能量——Hope，这种谎言在生活中很常见，但我的缺少一个目的——钱。</p>
<h4 id="附上我的-custom-styl"><a href="#附上我的-custom-styl" class="headerlink" title="附上我的 custom.styl"></a>附上我的 custom.styl</h4><p>一定是先 F12 找到要自定义的元素，调试成自己喜欢的值，然后再复制到custom.styl，而不是直接复制我给出的，我给出的仅供参考。</p>
<div class="note warning"><p>请先找对元素，不然可能会制造出新 bug，建议大家修改一个，就加个注释，方便以后调试修改。</p></div>

<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div><div class="line">162</div><div class="line">163</div><div class="line">164</div><div class="line">165</div><div class="line">166</div><div class="line">167</div><div class="line">168</div><div class="line">169</div><div class="line">170</div><div class="line">171</div><div class="line">172</div><div class="line">173</div><div class="line">174</div><div class="line">175</div><div class="line">176</div><div class="line">177</div><div class="line">178</div><div class="line">179</div><div class="line">180</div><div class="line">181</div><div class="line">182</div><div class="line">183</div><div class="line">184</div><div class="line">185</div><div class="line">186</div><div class="line">187</div><div class="line">188</div><div class="line">189</div><div class="line">190</div><div class="line">191</div><div class="line">192</div><div class="line">193</div><div class="line">194</div><div class="line">195</div><div class="line">196</div><div class="line">197</div><div class="line">198</div><div class="line">199</div><div class="line">200</div><div class="line">201</div><div class="line">202</div><div class="line">203</div><div class="line">204</div><div class="line">205</div><div class="line">206</div><div class="line">207</div><div class="line">208</div><div class="line">209</div><div class="line">210</div><div class="line">211</div><div class="line">212</div><div class="line">213</div><div class="line">214</div><div class="line">215</div><div class="line">216</div><div class="line">217</div><div class="line">218</div><div class="line">219</div><div class="line">220</div><div class="line">221</div><div class="line">222</div><div class="line">223</div><div class="line">224</div><div class="line">225</div><div class="line">226</div><div class="line">227</div><div class="line">228</div><div class="line">229</div><div class="line">230</div><div class="line">231</div><div class="line">232</div><div class="line">233</div><div class="line">234</div><div class="line">235</div><div class="line">236</div><div class="line">237</div><div class="line">238</div><div class="line">239</div><div class="line">240</div><div class="line">241</div><div class="line">242</div><div class="line">243</div><div class="line">244</div><div class="line">245</div><div class="line">246</div><div class="line">247</div><div class="line">248</div><div class="line">249</div><div class="line">250</div><div class="line">251</div><div class="line">252</div><div class="line">253</div><div class="line">254</div><div class="line">255</div><div class="line">256</div><div class="line">257</div><div class="line">258</div><div class="line">259</div><div class="line">260</div><div class="line">261</div><div class="line">262</div><div class="line">263</div><div class="line">264</div><div class="line">265</div><div class="line">266</div><div class="line">267</div><div class="line">268</div><div class="line">269</div><div class="line">270</div><div class="line">271</div><div class="line">272</div><div class="line">273</div><div class="line">274</div><div class="line">275</div><div class="line">276</div><div class="line">277</div><div class="line">278</div><div class="line">279</div><div class="line">280</div><div class="line">281</div><div class="line">282</div><div class="line">283</div><div class="line">284</div><div class="line">285</div><div class="line">286</div><div class="line">287</div><div class="line">288</div><div class="line">289</div><div class="line">290</div><div class="line">291</div><div class="line">292</div><div class="line">293</div><div class="line">294</div><div class="line">295</div><div class="line">296</div><div class="line">297</div><div class="line">298</div><div class="line">299</div><div class="line">300</div><div class="line">301</div><div class="line">302</div><div class="line">303</div><div class="line">304</div><div class="line">305</div><div class="line">306</div><div class="line">307</div><div class="line">308</div><div class="line">309</div><div class="line">310</div><div class="line">311</div><div class="line">312</div><div class="line">313</div><div class="line">314</div><div class="line">315</div><div class="line">316</div><div class="line">317</div><div class="line">318</div><div class="line">319</div><div class="line">320</div><div class="line">321</div><div class="line">322</div><div class="line">323</div><div class="line">324</div><div class="line">325</div><div class="line">326</div><div class="line">327</div><div class="line">328</div><div class="line">329</div><div class="line">330</div><div class="line">331</div><div class="line">332</div><div class="line">333</div><div class="line">334</div><div class="line">335</div><div class="line">336</div><div class="line">337</div><div class="line">338</div><div class="line">339</div><div class="line">340</div><div class="line">341</div><div class="line">342</div><div class="line">343</div><div class="line">344</div><div class="line">345</div><div class="line">346</div><div class="line">347</div><div class="line">348</div><div class="line">349</div><div class="line">350</div><div class="line">351</div><div class="line">352</div><div class="line">353</div><div class="line">354</div><div class="line">355</div><div class="line">356</div><div class="line">357</div><div class="line">358</div><div class="line">359</div><div class="line">360</div><div class="line">361</div><div class="line">362</div><div class="line">363</div><div class="line">364</div><div class="line">365</div><div class="line">366</div><div class="line">367</div><div class="line">368</div><div class="line">369</div><div class="line">370</div><div class="line">371</div><div class="line">372</div><div class="line">373</div><div class="line">374</div><div class="line">375</div><div class="line">376</div><div class="line">377</div><div class="line">378</div><div class="line">379</div><div class="line">380</div><div class="line">381</div><div class="line">382</div><div class="line">383</div><div class="line">384</div><div class="line">385</div><div class="line">386</div><div class="line">387</div><div class="line">388</div><div class="line">389</div><div class="line">390</div><div class="line">391</div><div class="line">392</div><div class="line">393</div><div class="line">394</div><div class="line">395</div><div class="line">396</div><div class="line">397</div><div class="line">398</div><div class="line">399</div><div class="line">400</div><div class="line">401</div><div class="line">402</div><div class="line">403</div><div class="line">404</div><div class="line">405</div><div class="line">406</div><div class="line">407</div><div class="line">408</div><div class="line">409</div><div class="line">410</div><div class="line">411</div><div class="line">412</div><div class="line">413</div><div class="line">414</div><div class="line">415</div><div class="line">416</div><div class="line">417</div><div class="line">418</div><div class="line">419</div><div class="line">420</div><div class="line">421</div><div class="line">422</div><div class="line">423</div><div class="line">424</div><div class="line">425</div><div class="line">426</div><div class="line">427</div><div class="line">428</div><div class="line">429</div><div class="line">430</div><div class="line">431</div><div class="line">432</div><div class="line">433</div><div class="line">434</div><div class="line">435</div><div class="line">436</div><div class="line">437</div><div class="line">438</div><div class="line">439</div><div class="line">440</div><div class="line">441</div><div class="line">442</div><div class="line">443</div><div class="line">444</div><div class="line">445</div><div class="line">446</div><div class="line">447</div><div class="line">448</div><div class="line">449</div><div class="line">450</div><div class="line">451</div><div class="line">452</div><div class="line">453</div><div class="line">454</div><div class="line">455</div><div class="line">456</div><div class="line">457</div><div class="line">458</div><div class="line">459</div><div class="line">460</div><div class="line">461</div><div class="line">462</div><div class="line">463</div><div class="line">464</div><div class="line">465</div><div class="line">466</div><div class="line">467</div><div class="line">468</div><div class="line">469</div><div class="line">470</div><div class="line">471</div><div class="line">472</div><div class="line">473</div><div class="line">474</div><div class="line">475</div><div class="line">476</div><div class="line">477</div><div class="line">478</div><div class="line">479</div><div class="line">480</div><div class="line">481</div><div class="line">482</div><div class="line">483</div><div class="line">484</div><div class="line">485</div><div class="line">486</div><div class="line">487</div><div class="line">488</div><div class="line">489</div><div class="line">490</div><div class="line">491</div><div class="line">492</div><div class="line">493</div><div class="line">494</div><div class="line">495</div><div class="line">496</div><div class="line">497</div><div class="line">498</div><div class="line">499</div><div class="line">500</div><div class="line">501</div><div class="line">502</div><div class="line">503</div><div class="line">504</div><div class="line">505</div><div class="line">506</div><div class="line">507</div><div class="line">508</div><div class="line">509</div><div class="line">510</div><div class="line">511</div><div class="line">512</div><div class="line">513</div><div class="line">514</div><div class="line">515</div><div class="line">516</div><div class="line">517</div><div class="line">518</div><div class="line">519</div><div class="line">520</div><div class="line">521</div><div class="line">522</div><div class="line">523</div><div class="line">524</div><div class="line">525</div><div class="line">526</div><div class="line">527</div><div class="line">528</div><div class="line">529</div><div class="line">530</div><div class="line">531</div><div class="line">532</div><div class="line">533</div><div class="line">534</div><div class="line">535</div><div class="line">536</div><div class="line">537</div><div class="line">538</div><div class="line">539</div><div class="line">540</div><div class="line">541</div><div class="line">542</div><div class="line">543</div><div class="line">544</div><div class="line">545</div><div class="line">546</div><div class="line">547</div><div class="line">548</div><div class="line">549</div><div class="line">550</div><div class="line">551</div><div class="line">552</div><div class="line">553</div><div class="line">554</div><div class="line">555</div><div class="line">556</div><div class="line">557</div><div class="line">558</div><div class="line">559</div><div class="line">560</div><div class="line">561</div><div class="line">562</div><div class="line">563</div><div class="line">564</div><div class="line">565</div><div class="line">566</div><div class="line">567</div><div class="line">568</div><div class="line">569</div><div class="line">570</div><div class="line">571</div><div class="line">572</div><div class="line">573</div><div class="line">574</div><div class="line">575</div><div class="line">576</div><div class="line">577</div><div class="line">578</div><div class="line">579</div><div class="line">580</div><div class="line">581</div><div class="line">582</div><div class="line">583</div><div class="line">584</div><div class="line">585</div><div class="line">586</div><div class="line">587</div><div class="line">588</div><div class="line">589</div><div class="line">590</div><div class="line">591</div><div class="line">592</div><div class="line">593</div><div class="line">594</div><div class="line">595</div><div class="line">596</div><div class="line">597</div><div class="line">598</div><div class="line">599</div><div class="line">600</div><div class="line">601</div><div class="line">602</div><div class="line">603</div><div class="line">604</div><div class="line">605</div><div class="line">606</div><div class="line">607</div><div class="line">608</div><div class="line">609</div><div class="line">610</div><div class="line">611</div><div class="line">612</div><div class="line">613</div><div class="line">614</div><div class="line">615</div><div class="line">616</div><div class="line">617</div><div class="line">618</div><div class="line">619</div><div class="line">620</div><div class="line">621</div><div class="line">622</div><div class="line">623</div><div class="line">624</div><div class="line">625</div><div class="line">626</div><div class="line">627</div><div class="line">628</div><div class="line">629</div><div class="line">630</div><div class="line">631</div><div class="line">632</div><div class="line">633</div><div class="line">634</div><div class="line">635</div><div class="line">636</div><div class="line">637</div><div class="line">638</div><div class="line">639</div><div class="line">640</div><div class="line">641</div><div class="line">642</div><div class="line">643</div><div class="line">644</div><div class="line">645</div><div class="line">646</div><div class="line">647</div><div class="line">648</div><div class="line">649</div><div class="line">650</div><div class="line">651</div><div class="line">652</div><div class="line">653</div><div class="line">654</div><div class="line">655</div><div class="line">656</div><div class="line">657</div><div class="line">658</div><div class="line">659</div><div class="line">660</div><div class="line">661</div><div class="line">662</div><div class="line">663</div><div class="line">664</div><div class="line">665</div><div class="line">666</div><div class="line">667</div><div class="line">668</div><div class="line">669</div><div class="line">670</div><div class="line">671</div><div class="line">672</div><div class="line">673</div><div class="line">674</div><div class="line">675</div><div class="line">676</div><div class="line">677</div><div class="line">678</div><div class="line">679</div><div class="line">680</div><div class="line">681</div><div class="line">682</div><div class="line">683</div><div class="line">684</div><div class="line">685</div><div class="line">686</div><div class="line">687</div><div class="line">688</div><div class="line">689</div><div class="line">690</div><div class="line">691</div><div class="line">692</div><div class="line">693</div><div class="line">694</div><div class="line">695</div><div class="line">696</div><div class="line">697</div><div class="line">698</div><div class="line">699</div><div class="line">700</div><div class="line">701</div><div class="line">702</div><div class="line">703</div><div class="line">704</div><div class="line">705</div><div class="line">706</div><div class="line">707</div><div class="line">708</div><div class="line">709</div><div class="line">710</div><div class="line">711</div><div class="line">712</div><div class="line">713</div><div class="line">714</div><div class="line">715</div><div class="line">716</div><div class="line">717</div><div class="line">718</div><div class="line">719</div><div class="line">720</div><div class="line">721</div><div class="line">722</div><div class="line">723</div><div class="line">724</div><div class="line">725</div><div class="line">726</div><div class="line">727</div><div class="line">728</div><div class="line">729</div><div class="line">730</div><div class="line">731</div><div class="line">732</div><div class="line">733</div><div class="line">734</div><div class="line">735</div><div class="line">736</div><div class="line">737</div><div class="line">738</div><div class="line">739</div><div class="line">740</div><div class="line">741</div><div class="line">742</div><div class="line">743</div><div class="line">744</div><div class="line">745</div><div class="line">746</div><div class="line">747</div><div class="line">748</div><div class="line">749</div><div class="line">750</div><div class="line">751</div><div class="line">752</div><div class="line">753</div><div class="line">754</div><div class="line">755</div><div class="line">756</div><div class="line">757</div><div class="line">758</div><div class="line">759</div><div class="line">760</div><div class="line">761</div><div class="line">762</div><div class="line">763</div><div class="line">764</div><div class="line">765</div><div class="line">766</div><div class="line">767</div><div class="line">768</div><div class="line">769</div><div class="line">770</div><div class="line">771</div><div class="line">772</div><div class="line">773</div><div class="line">774</div><div class="line">775</div><div class="line">776</div><div class="line">777</div><div class="line">778</div><div class="line">779</div><div class="line">780</div><div class="line">781</div><div class="line">782</div><div class="line">783</div><div class="line">784</div><div class="line">785</div><div class="line">786</div><div class="line">787</div><div class="line">788</div><div class="line">789</div><div class="line">790</div><div class="line">791</div><div class="line">792</div><div class="line">793</div><div class="line">794</div><div class="line">795</div><div class="line">796</div><div class="line">797</div><div class="line">798</div><div class="line">799</div><div class="line">800</div><div class="line">801</div><div class="line">802</div><div class="line">803</div><div class="line">804</div><div class="line">805</div><div class="line">806</div><div class="line">807</div><div class="line">808</div><div class="line">809</div><div class="line">810</div><div class="line">811</div><div class="line">812</div><div class="line">813</div><div class="line">814</div><div class="line">815</div><div class="line">816</div><div class="line">817</div><div class="line">818</div><div class="line">819</div><div class="line">820</div><div class="line">821</div><div class="line">822</div><div class="line">823</div><div class="line">824</div><div class="line">825</div><div class="line">826</div><div class="line">827</div><div class="line">828</div><div class="line">829</div><div class="line">830</div><div class="line">831</div><div class="line">832</div><div class="line">833</div><div class="line">834</div><div class="line">835</div><div class="line">836</div><div class="line">837</div><div class="line">838</div><div class="line">839</div><div class="line">840</div><div class="line">841</div><div class="line">842</div><div class="line">843</div><div class="line">844</div><div class="line">845</div><div class="line">846</div><div class="line">847</div></pre></div><div class="code"><pre><div class="line">// Custom styles</div><div class="line">// 页面最顶部的横线</div><div class="line"><span class="selector-class">.headband</span> &#123;</div><div class="line">    <span class="attribute">height</span>: <span class="number">1.5px</span>;</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);</div><div class="line">&#125;</div><div class="line">// 页面顶部行高</div><div class="line"><span class="selector-class">.header</span> &#123;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</div><div class="line">&#125;</div><div class="line">// 页面背景色</div><div class="line"><span class="selector-class">.container</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 0, 0.75);</div><div class="line">&#125;</div><div class="line">// 页面留白更改</div><div class="line"><span class="selector-class">.header-inner</span> &#123;</div><div class="line">    <span class="attribute">padding-top</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">padding-bottom</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.posts-expand</span> &#123;</div><div class="line">    <span class="attribute">padding-top</span>: <span class="number">80px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-meta</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">0px</span> <span class="number">0px</span> <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-button</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 顶栏宽度</div><div class="line"><span class="selector-class">.container</span> <span class="selector-class">.header-inner</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</div><div class="line">&#125;</div><div class="line">// 渐变菜带，CSS代码copy自https://githubuniverse.com</div><div class="line"><span class="selector-class">.site-meta</span> &#123;</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);</div><div class="line">&#125;</div><div class="line">// 站点名背景</div><div class="line"><span class="selector-class">.brand</span>&#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0);</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 站点名字体</div><div class="line"><span class="selector-class">.site-title</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">75px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">80px</span>;</div><div class="line">    <span class="attribute">letter-spacing</span>: <span class="number">3px</span>;</div><div class="line">&#125;</div><div class="line">// 站点子标题</div><div class="line"><span class="selector-class">.site-subtitle</span>&#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">16px</span>;</div><div class="line">    <span class="attribute">letter-spacing</span>: <span class="number">1px</span>;</div><div class="line">    <span class="attribute">padding-bottom</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">border-bottom-width</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">border-bottom-style</span>: solid;</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 菜单</div><div class="line"><span class="selector-class">.menu</span> &#123;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0.75);</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">10px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.15);</div><div class="line">&#125;</div><div class="line">// 菜单超链接字体大小</div><div class="line"><span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line">// 菜单各项边距</div><div class="line"><span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">5px</span> <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line">// 菜单超链接样式</div><div class="line"><span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgba</span>(161, 102, 171, 0);</div><div class="line">&#125;</div><div class="line">// 文章</div><div class="line"><span class="selector-class">.post</span> &#123;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">50px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">45px</span> <span class="number">36px</span> <span class="number">36px</span> <span class="number">36px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 文章标题字体</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-title</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">26px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: <span class="number">700</span>;</div><div class="line">&#125;</div><div class="line">// 文章标题动态效果</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-title-link</span><span class="selector-pseudo">::before</span> &#123;</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);</div><div class="line">&#125;</div><div class="line">// 文章元数据（meta）留白更改</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-meta</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0px</span> <span class="number">20px</span> <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 文章的描述description</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-meta</span> <span class="selector-class">.post-description</span> &#123;</div><div class="line">    <span class="attribute">font-style</span>: italic;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#666</span>;</div><div class="line">&#125;</div><div class="line">// [Read More]按钮样式</div><div class="line"><span class="selector-class">.post-button</span> <span class="selector-class">.btn</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span> <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">    <span class="attribute">border</span>: none <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">transition-property</span>: unset;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-button</span> <span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255) <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);</div><div class="line">&#125;</div><div class="line">// 去除在页面文章之间的分割线</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-eof</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0);</div><div class="line">&#125;</div><div class="line">// 去除页面底部页码上面的横线</div><div class="line"><span class="selector-class">.pagination</span> &#123;</div><div class="line">    <span class="attribute">border</span>: none;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 页面底部页码</div><div class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.page-number</span><span class="selector-class">.current</span> &#123;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">100%</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0.35);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.prev</span>, <span class="selector-class">.pagination</span> <span class="selector-class">.next</span>, <span class="selector-class">.pagination</span> <span class="selector-class">.page-number</span> &#123;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">border</span>: none;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.pagination</span> <span class="selector-class">.space</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 页面底部页脚</div><div class="line"><span class="selector-class">.footer</span> &#123;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0.75);</div><div class="line">    <span class="attribute">color</span>: <span class="number">#333</span>;</div><div class="line">    <span class="attribute">border-top-width</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">border-top-style</span>: solid;</div><div class="line">    <span class="attribute">border-top-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> -<span class="number">10px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.15);</div><div class="line">&#125;</div><div class="line">// 文章底部的tags</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-tags</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">margin-right</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">5px</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">transition-duration</span>: <span class="number">0.2s</span>;</div><div class="line">    <span class="attribute">transition-timing-function</span>: ease-in-out;</div><div class="line">    <span class="attribute">transition-delay</span>: <span class="number">0s</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-tags</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line">// 文章底部留白更改</div><div class="line"><span class="selector-class">.post-widgets</span> &#123;</div><div class="line">    <span class="attribute">padding-top</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-nav</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">&#125;</div><div class="line">// 文章底部页面跳转</div><div class="line"><span class="selector-class">.post-nav-item</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-nav-item</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">&#125;</div><div class="line">// 文章底部评论</div><div class="line"><span class="selector-class">.comments</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">    <span class="attribute">margin</span>: <span class="number">80px</span> <span class="number">0px</span> <span class="number">40px</span> <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 超链接样式</div><div class="line"><span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 分割线样式</div><div class="line"><span class="selector-tag">hr</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">10px</span> <span class="number">0px</span> <span class="number">30px</span> <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 文章内标题样式（左边的竖线）</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span> &#123;</div><div class="line">    <span class="attribute">border-left</span>: <span class="number">4px</span> solid <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">margin-left</span>: -<span class="number">36px</span>;</div><div class="line">    <span class="attribute">padding-left</span>: <span class="number">32px</span>;</div><div class="line">&#125;</div><div class="line">// 去掉图片边框</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-body</span> <span class="selector-tag">img</span> &#123;</div><div class="line">    <span class="attribute">border</span>: none;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-gallery</span> <span class="selector-class">.post-gallery-img</span> <span class="selector-tag">img</span> &#123;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">3px</span>;</div><div class="line">&#125;</div><div class="line">// 文章``代码块的自定义样式</div><div class="line"><span class="selector-tag">code</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> <span class="number">4px</span>;</div><div class="line">&#125;</div><div class="line">// 文章```代码块顶部样式</div><div class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0em</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0.5em</span>;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#eee</span>;</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#e9e9e9</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">&#125;</div><div class="line">// 文章```代码块diff样式</div><div class="line"><span class="selector-tag">pre</span> <span class="selector-class">.addition</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#e6ffed</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">pre</span> <span class="selector-class">.deletion</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#ffeef0</span>;</div><div class="line">&#125;</div><div class="line">// 右下角侧栏按钮样式</div><div class="line"><span class="selector-class">.sidebar-toggle</span> &#123;</div><div class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">43px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(247, 149, 51, 0.75);</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.page-post-detail</span> <span class="selector-class">.sidebar-toggle-line</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">&#125;</div><div class="line">// 右下角返回顶部按钮样式</div><div class="line"><span class="selector-class">.back-to-top</span> &#123;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</div><div class="line">    <span class="attribute">right</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">padding-right</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">padding-left</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">padding-top</span>: <span class="number">2.5px</span>;</div><div class="line">    <span class="attribute">padding-bottom</span>: <span class="number">2.5px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(247, 149, 51, 0.75);</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.back-to-top</span><span class="selector-class">.back-to-top-on</span> &#123;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line">// 侧栏</div><div class="line"><span class="selector-class">.sidebar</span> &#123;</div><div class="line">    <span class="attribute">box-shadow</span>: inset <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 0, 0.75);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar-inner</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">&#125;</div><div class="line">// 侧栏顶部文字</div><div class="line"><span class="selector-class">.sidebar-nav</span> <span class="selector-tag">li</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar-nav</span> <span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar-nav</span> <span class="selector-class">.sidebar-nav-active</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom-width</span>: <span class="number">1.5px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar-nav</span> <span class="selector-class">.sidebar-nav-active</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">&#125;</div><div class="line">// 侧栏站点概况行高</div><div class="line"><span class="selector-class">.site-overview</span> &#123;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.3</span>;</div><div class="line">&#125;</div><div class="line">// 侧栏头像（圆形以及旋转效果）</div><div class="line"><span class="selector-class">.site-author-image</span> &#123;</div><div class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">100%</span>;</div><div class="line">    <span class="attribute">transition</span>: transform <span class="number">1.0s</span> ease-out;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">transform</span>: <span class="built_in">rotateZ</span>(360deg);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.posts-expand</span> <span class="selector-class">.post-body</span> <span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">transform</span>: initial;</div><div class="line">&#125;</div><div class="line">// 侧栏站点作者名</div><div class="line"><span class="selector-class">.site-author-name</span> &#123;</div><div class="line">    <span class="attribute">display</span>: none;</div><div class="line">&#125;</div><div class="line">// 侧栏站点描述</div><div class="line"><span class="selector-class">.site-description</span> &#123;</div><div class="line">    <span class="attribute">letter-spacing</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">13px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(243, 112, 85);</div><div class="line">&#125;</div><div class="line">// 侧栏站点文章、分类、标签</div><div class="line"><span class="selector-class">.site-state</span> &#123;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.3</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">12px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.site-state-item</span> &#123;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">15px</span>;</div><div class="line">    <span class="attribute">border-left</span>: <span class="number">1.5px</span> solid <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 侧栏RSS按钮样式</div><div class="line"><span class="selector-class">.feed-link</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">7px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.feed-link</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(158, 158, 158) <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.feed-link</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.feed-link</span> <span class="selector-tag">a</span> <span class="selector-tag">i</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 侧栏社交链接</div><div class="line"><span class="selector-class">.links-of-author</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">// 侧栏友链标题</div><div class="line"><span class="selector-class">.links-of-blogroll-title</span> &#123;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgba</span>(7, 179, 155, 0.75);</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">6px</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">15px</span>;</div><div class="line">    <span class="attribute">font-weight</span>: bold;</div><div class="line">&#125;</div><div class="line">// 侧栏超链接样式（友链的样式）</div><div class="line"><span class="selector-class">.sidebar</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#ccc</span>;</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 自定义的侧栏时间样式</div><div class="line"><span class="selector-id">#days</span> &#123;</div><div class="line">    <span class="attribute">display</span>: block;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line">// 侧栏目录链接样式</div><div class="line"><span class="selector-class">.post-toc</span> <span class="selector-tag">ol</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(96, 125, 139);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-toc</span> <span class="selector-tag">ol</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 侧栏目录链接样式之当前目录</div><div class="line"><span class="selector-class">.post-toc</span> <span class="selector-class">.nav</span> <span class="selector-class">.active</span> &gt; <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-toc</span> <span class="selector-class">.nav</span> <span class="selector-class">.active</span> &gt; <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 修侧栏目录bug，如果主题配置文件_config.yml的toc是wrap: true */</span></div><div class="line"><span class="selector-class">.post-toc</span> <span class="selector-tag">ol</span> &#123;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span> <span class="number">10px</span> <span class="number">5px</span> <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 侧栏目录默认全展开，已注释</span></div><div class="line"><span class="comment">.post-toc .nav .nav-child &#123;</span></div><div class="line"><span class="comment">    display: block;</span></div><div class="line"><span class="comment">&#125;</span></div><div class="line"><span class="comment">*/</span></div><div class="line">// 时间轴样式</div><div class="line"><span class="selector-class">.posts-collapse</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">0px</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">1023px</span>) &#123;</div><div class="line">    <span class="selector-class">.posts-collapse</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: <span class="number">50px</span> <span class="number">20px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">// 时间轴左边线条</div><div class="line"><span class="selector-class">.posts-collapse</span><span class="selector-pseudo">::after</span> &#123;</div><div class="line">    <span class="attribute">margin-left</span>: -<span class="number">2px</span>;</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);</div><div class="line">&#125;</div><div class="line">// 时间轴左边线条圆点颜色</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.collection-title</span><span class="selector-pseudo">::before</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 时间轴文章标题左边圆点颜色</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.post-header</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::before</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 时间轴年份</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.collection-title</span> <span class="selector-tag">h1</span>, <span class="selector-class">.posts-collapse</span> <span class="selector-class">.collection-title</span> <span class="selector-tag">h2</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 时间轴文章标题</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.post-title</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.post-title</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// 时间轴文章标题底部虚线</div><div class="line"><span class="selector-class">.posts-collapse</span> <span class="selector-class">.post-header</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">border-bottom-color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">&#125;</div><div class="line">// archives页面顶部文字</div><div class="line"><span class="selector-class">.page-archive</span> <span class="selector-class">.archive-page-counter</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// archives页面时间轴左边线条第一个圆点颜色</div><div class="line"><span class="selector-class">.page-archive</span> <span class="selector-class">.posts-collapse</span> <span class="selector-class">.archive-move-on</span> &#123;</div><div class="line">    <span class="attribute">top</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">&#125;</div><div class="line">// 分类页面</div><div class="line"><span class="selector-class">.post-block</span><span class="selector-class">.page</span> &#123;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">40px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.category-all-page</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: -<span class="number">80px</span> <span class="number">50px</span> <span class="number">40px</span> <span class="number">50px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">padding</span>: <span class="number">86px</span> <span class="number">36px</span> <span class="number">36px</span> <span class="number">36px</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.category-all-page</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: -<span class="number">73px</span> <span class="number">15px</span> <span class="number">50px</span> <span class="number">15px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.category-all-page</span> <span class="selector-class">.category-all-title</span> &#123;</div><div class="line">        <span class="attribute">margin-top</span>: -<span class="number">5px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">// 标签云页面</div><div class="line"><span class="selector-class">.tag-cloud</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: -<span class="number">80px</span> <span class="number">50px</span> <span class="number">40px</span> <span class="number">50px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">padding</span>: <span class="number">86px</span> <span class="number">36px</span> <span class="number">36px</span> <span class="number">36px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.tag-cloud-title</span> &#123;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">15px</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.tag-cloud</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: -<span class="number">73px</span> <span class="number">15px</span> <span class="number">50px</span> <span class="number">15px</span>;</div><div class="line">        <span class="attribute">padding</span>: <span class="number">86px</span> <span class="number">5px</span> <span class="number">36px</span> <span class="number">5px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">// 自定义的TopX页面样式</div><div class="line"><span class="selector-id">#top</span> &#123;</div><div class="line">    <span class="attribute">display</span>: block;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">margin</span>: -<span class="number">100px</span> <span class="number">50px</span> <span class="number">40px</span> <span class="number">50px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">padding</span>: <span class="number">106px</span> <span class="number">36px</span> <span class="number">10px</span> <span class="number">36px</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-id">#top</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: -<span class="number">93px</span> <span class="number">15px</span> <span class="number">50px</span> <span class="number">15px</span>;</div><div class="line">        <span class="attribute">padding</span>: <span class="number">96px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="number">10px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">// 自定义ABOUT页面的样式</div><div class="line"><span class="selector-class">.about-page</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: -<span class="number">80px</span> <span class="number">0px</span> <span class="number">60px</span> <span class="number">0px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">    <span class="attribute">padding</span>: <span class="number">106px</span> <span class="number">36px</span> <span class="number">36px</span> <span class="number">36px</span>;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.about-page</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: -<span class="number">73px</span> <span class="number">0px</span> <span class="number">50px</span> <span class="number">0px</span>;</div><div class="line">        <span class="attribute">padding</span>: <span class="number">96px</span> <span class="number">15px</span> <span class="number">20px</span> <span class="number">15px</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">h2</span><span class="selector-class">.about-title</span> &#123;</div><div class="line">    <span class="attribute">border-left</span>: none <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">margin-left</span>: <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">padding-left</span>: <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(90deg, #a166ab 0%, #a166ab 40%, #ef4e7b 45%, #f37055 50%, #ef4e7b 55%, #a166ab 60%, #a166ab 100%);</div><div class="line">    <span class="attribute">background-size</span>: cover;</div><div class="line">    <span class="attribute">-webkit-background-clip</span>: text;</div><div class="line">    <span class="attribute">-webkit-text-fill-color</span>: transparent;</div><div class="line">    <span class="attribute">user-select</span>: none;</div><div class="line">&#125;</div><div class="line">// 本地搜索框</div><div class="line"><span class="selector-class">.local-search-popup</span> <span class="selector-class">.search-icon</span>, <span class="selector-class">.local-search-popup</span> <span class="selector-class">.popup-btn-close</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(247, 149, 51);</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">7px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.local-search-popup</span> <span class="selector-class">.local-search-input-wrapper</span> <span class="selector-tag">input</span> &#123;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">9px</span> <span class="number">0px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">21px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.local-search-popup</span> <span class="selector-class">.popup-btn-close</span> &#123;</div><div class="line">    <span class="attribute">border-left</span>: none;</div><div class="line">&#125;</div><div class="line">// 选中文字部分的样式</div><div class="line"><span class="selector-pseudo">::selection</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 241, 89);</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 设置滚动条的样式 */</span></div><div class="line"><span class="comment">/* 参考https://segmentfault.com/a/1190000003708894 */</span></div><div class="line"><span class="selector-pseudo">::-webkit-scrollbar</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">5px</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 滚动槽 */</span></div><div class="line"><span class="selector-pseudo">::-webkit-scrollbar-track</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#eee</span>;</div><div class="line">&#125;</div><div class="line"><span class="comment">/* 滚动条滑块 */</span></div><div class="line"><span class="selector-pseudo">::-webkit-scrollbar-thumb</span> &#123;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="number">#ccc</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-pseudo">::-webkit-scrollbar-thumb</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(247, 149, 51);</div><div class="line">&#125;</div><div class="line">// 音乐播放器aplayer</div><div class="line"><span class="selector-class">.aplayer</span> &#123;</div><div class="line">    <span class="attribute">font-family</span>: Lato, -apple-system, BlinkMacSystemFont, <span class="string">"PingFang SC"</span>, <span class="string">"Hiragino Sans GB"</span>, <span class="string">"Heiti SC"</span>, STHeiti, <span class="string">"Source Han Sans SC"</span>, <span class="string">"Noto Sans CJK SC"</span>, <span class="string">"WenQuanYi Micro Hei"</span>, <span class="string">"Droid Sans Fallback"</span>, <span class="string">"Microsoft YaHei"</span>, sans-serif <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.aplayer-withlrc</span><span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-info</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 音乐播放器aplayer歌单</div><div class="line"><span class="selector-class">.aplayer</span> <span class="selector-class">.aplayer-list</span> <span class="selector-tag">ol</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 修视频播放器dplayer页面全屏的bug</div><div class="line">// 已不存在，注释掉了</div><div class="line">// .use-motion .post-body &#123;</div><div class="line">//     transform: inherit !important;</div><div class="line">// &#125;</div><div class="line">// 自定义emoji样式</div><div class="line"><span class="selector-tag">img</span><span class="selector-id">#github-emoji</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">display</span>: inline <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">vertical-align</span>: text-bottom;</div><div class="line">    <span class="attribute">border</span>: none;</div><div class="line">    <span class="attribute">cursor</span>: text;</div><div class="line">    <span class="attribute">box-shadow</span>: none;</div><div class="line">&#125;</div><div class="line">// 文章超链接样式（为emoji特设）</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line">// 标签云页面超链接样式（为emoji特设）</div><div class="line"><span class="selector-class">.tag-cloud</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.tag-cloud</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line">// 文章元数据中categories的样式（为emoji特设）</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.categories</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.categories</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line">// tabs标签（为emoji特设）</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-class">.tabs</span> <span class="selector-tag">ul</span><span class="selector-class">.nav-tabs</span> <span class="selector-tag">li</span><span class="selector-class">.tab</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line">// 图片下方标题设置（为emoji特设）</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.fancybox</span>&#123;</div><div class="line">    <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line">// 按钮样式（为emoji特设）</div><div class="line"><span class="selector-class">.btn</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#222</span> <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#222</span> <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line">// 自定义的页脚微信订阅号样式</div><div class="line"><span class="selector-class">.weixin-box</span> &#123;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">43px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span> &#123;</div><div class="line">    <span class="attribute">position</span>: relative;</div><div class="line">    <span class="attribute">height</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">cursor</span>: pointer;</div><div class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(https://微信的logo.svg);</div><div class="line">    <span class="attribute">background-size</span>: <span class="number">24px</span> <span class="number">24px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-hover</span> &#123;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(https://二维码.svg);</div><div class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</div><div class="line">    <span class="attribute">background-repeat</span>: no-repeat;</div><div class="line">    <span class="attribute">background-size</span>: <span class="number">150px</span> <span class="number">150px</span>;</div><div class="line">    <span class="attribute">transition</span>: all <span class="number">0.35s</span> ease-in-out;</div><div class="line">    <span class="attribute">z-index</span>: <span class="number">1024</span>;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.weixin-hover</span> &#123;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">170px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-description</span> &#123;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">3%</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">5%</span>;</div><div class="line">    <span class="attribute">right</span>: <span class="number">5%</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</div><div class="line">    <span class="attribute">transition</span>: all <span class="number">0.35s</span> <span class="built_in">cubic-bezier</span>(1, 0, 0, 1);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.weixin-description</span> &#123;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</div><div class="line">&#125;</div><div class="line">// 自定义页脚跳动的心样式</div><div class="line">@<span class="keyword">keyframes</span> heartAnimate &#123;</div><div class="line">    0%,100%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1);&#125;</div><div class="line">    10%,30%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(0.9);&#125;</div><div class="line">    20%,40%,60%,80%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);&#125;</div><div class="line">    50%,70%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);&#125;</div><div class="line">&#125;</div><div class="line"><span class="selector-id">#heart</span> &#123;</div><div class="line">    <span class="attribute">animation</span>: heartAnimate <span class="number">1.33s</span> ease-in-out infinite;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.with-love</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 113, 168);</div><div class="line">&#125;</div><div class="line">// 自定义特别的样式</div><div class="line"><span class="selector-tag">h2</span><span class="selector-class">.love</span> &#123;</div><div class="line">    <span class="attribute">border-left</span>: none;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 113, 168);</div><div class="line">    <span class="attribute">-webkit-text-fill-color</span>: unset;</div><div class="line">&#125;</div><div class="line">// 自定义的引用样式</div><div class="line"><span class="selector-tag">blockquote</span><span class="selector-class">.question</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</div><div class="line">    <span class="attribute">border-left</span>: <span class="number">4px</span> solid <span class="built_in">rgb</span>(16, 152, 173);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(227, 242, 253);</div><div class="line">    <span class="attribute">border-top-right-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">border-bottom-right-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div><div class="line">// 自定义的数字块</div><div class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-toc</span> &#123;</div><div class="line">    <span class="attribute">display</span>: inline-block;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">80%</span> <span class="number">100%</span> <span class="number">90%</span> <span class="number">20%</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(227, 242, 253);</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0.05em</span> <span class="number">0.4em</span>;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">2px</span> <span class="number">5px</span> <span class="number">2px</span> <span class="number">0px</span>;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</div><div class="line">&#125;</div><div class="line">// 自定义的文章摘要图片样式</div><div class="line"><span class="selector-tag">img</span><span class="selector-class">.img-topic</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</div><div class="line">&#125;</div><div class="line">// 自定义的文章置顶样式</div><div class="line"><span class="selector-class">.post-sticky-flag</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: inherit;</div><div class="line">    <span class="attribute">float</span>: left;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(0, 0, 0);</div><div class="line">    <span class="attribute">cursor</span>: help;</div><div class="line">    <span class="attribute">transition-duration</span>: <span class="number">0.2s</span>;</div><div class="line">    <span class="attribute">transition-timing-function</span>: ease-in-out;</div><div class="line">    <span class="attribute">transition-delay</span>: <span class="number">0s</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-sticky-flag</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#07b39b</span>;</div><div class="line">&#125;</div><div class="line">// 自定义替代description的样式</div><div class="line"><span class="selector-tag">p</span><span class="selector-class">.description</span>&#123;</div><div class="line">    <span class="attribute">text-align</span>: center;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">14px</span>;</div><div class="line">    <span class="attribute">font-style</span>: italic;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#666</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">30px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">code</span><span class="selector-class">.description</span> &#123;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span> <span class="number">1px</span>;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span> <span class="number">1px</span> <span class="number">0px</span> <span class="number">4px</span>;</div><div class="line">&#125;</div><div class="line">// 移动端样式</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">1023px</span>) &#123;</div><div class="line">    <span class="selector-class">.container</span> &#123;</div><div class="line">        <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(0, 0, 0, 0);</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.sidebar</span> &#123;</div><div class="line">        <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">        <span class="attribute">border-top-left-radius</span>: <span class="number">5px</span>;</div><div class="line">        <span class="attribute">border-bottom-left-radius</span>: <span class="number">5px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.feed-link</span> &#123;</div><div class="line">        <span class="attribute">display</span>: none <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.main</span> &#123;</div><div class="line">        <span class="attribute">padding-bottom</span>: <span class="number">120px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.posts-expand</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">        <span class="attribute">padding-top</span>: <span class="number">70px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.posts-expand</span> <span class="selector-class">.post-title</span> &#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">22px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.posts-expand</span> <span class="selector-class">.post-meta</span> &#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">10px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.post</span> &#123;</div><div class="line">        <span class="attribute">margin-bottom</span>: <span class="number">30px</span> <span class="meta">!important</span>;</div><div class="line">        <span class="attribute">padding</span>: <span class="number">20px</span> <span class="number">15px</span> <span class="number">15px</span> <span class="number">15px</span> <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.post-body</span> <span class="selector-tag">h2</span>, <span class="selector-tag">h3</span>, <span class="selector-tag">h4</span>, <span class="selector-tag">h5</span>, <span class="selector-tag">h6</span> &#123;</div><div class="line">        <span class="attribute">margin-left</span>: -<span class="number">15px</span>;</div><div class="line">        <span class="attribute">padding-left</span>: <span class="number">11px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.posts-expand</span> <span class="selector-class">.post-tags</span> &#123;</div><div class="line">        <span class="attribute">margin-top</span>: <span class="number">10px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.post-widgets</span> &#123;</div><div class="line">        <span class="attribute">margin-top</span>: <span class="number">10px</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.comments</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: <span class="number">40px</span> <span class="number">0px</span> <span class="number">40px</span> <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.footer</span> &#123;</div><div class="line">        <span class="attribute">box-shadow</span>: <span class="number">0px</span> -<span class="number">5px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.sidebar-active</span> <span class="selector-id">#sidebar-dimmer</span> &#123;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">&#125;</div><div class="line">// 移动端左上角菜单按钮</div><div class="line"><span class="selector-class">.site-nav-toggle</span> &#123;</div><div class="line">    <span class="attribute">top</span>: <span class="number">35px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.btn-bar</span> &#123;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(255, 255, 255);</div><div class="line">&#125;</div><div class="line">// 移动端菜单</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.menu</span> &#123;</div><div class="line">        <span class="attribute">text-align</span>: center;</div><div class="line">        <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">5px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.site-nav</span> &#123;</div><div class="line">        <span class="attribute">top</span>: initial;</div><div class="line">        <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(255, 255, 255, 0.75);</div><div class="line">        <span class="attribute">border-top</span>: none;</div><div class="line">        <span class="attribute">border-bottom</span>: none;</div><div class="line">        <span class="attribute">position</span>: relative;</div><div class="line">        <span class="attribute">z-index</span>: <span class="number">1024</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line">// 移动端顶部</div><div class="line">@<span class="keyword">media</span> (max-width: <span class="number">767px</span>) &#123;</div><div class="line">    <span class="selector-class">.site-title</span> &#123;</div><div class="line">        <span class="attribute">font-size</span>: <span class="number">70px</span> <span class="meta">!important</span>;</div><div class="line">        <span class="attribute">letter-spacing</span>: <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.site-subtitle</span>&#123;</div><div class="line">        <span class="attribute">letter-spacing</span>: <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">        <span class="attribute">padding-bottom</span>: <span class="number">0px</span> <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.site-meta</span> &#123;</div><div class="line">        <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">5px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.5);</div><div class="line">    &#125;</div><div class="line">    <span class="selector-class">.menu</span> <span class="selector-class">.menu-item</span> &#123;</div><div class="line">        <span class="attribute">margin</span>: <span class="number">0px</span> <span class="number">10px</span> <span class="meta">!important</span>;</div><div class="line">    &#125;</div><div class="line">&#125;</div></pre></div></div></figure>
<h4 id="修改字体"><a href="#修改字体" class="headerlink" title="修改字体"></a>修改字体</h4><p>优化了这么多，但还有一个最影响博客形象和阅读体验的项没有优化，瓦特？字体！</p>
<p>文章字体大小可以编辑：</p>
<figure class="highlight"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_variables/</span><span class="caption">base</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">$font-size-base           = 16px</div></pre></div></div></figure>
<p>如果你是一个和我一样对字体一脸懵逼的人，推荐阅读：</p>
<ol>
<li><a href="https://www.voyax.me/posts/59710/" rel="external nofollow noopener noreferrer" target="_blank">Web中文字体排版指南</a></li>
<li><a href="https://blog.coding.net/blog/Web-Fonts" rel="external nofollow noopener noreferrer" target="_blank">Web字体的选择和运用</a></li>
<li><a href="https://segmentfault.com/a/1190000006110417" rel="external nofollow noopener noreferrer" target="_blank">如何优雅的选择默认字体(font-family)</a></li>
<li><a href="http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html" rel="external nofollow noopener noreferrer" target="_blank">中文字体网页开发指南</a></li>
<li><a href="https://csspod.com/using-the-system-font-in-web-content/" rel="external nofollow noopener noreferrer" target="_blank">在Web内容中使用系统字体</a></li>
</ol>
<p>首先对于汉字来说，因为其字体库太大，通常都是调用本地中文字体库。然而，不同设备有不同默认中文字体和中文字体库，想要尽可能在不同设备上有较好的显示效果，就要在调用不同设备的本地字体库中显示效果较好的中文字体。</p>
<p>下面附上我的供大家参考：</p>
<figure class="highlight"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_variables/</span><span class="caption">base</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div></pre></div><div class="code"><pre><div class="line">// Font families.</div><div class="line">$font-family-chinese      = -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "STHeiti", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei"</div><div class="line"></div><div class="line">$font-family-base         = $font-family-chinese, sans-serif</div><div class="line">$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')</div><div class="line"></div><div class="line">$font-family-logo         = $font-family-base</div><div class="line">$font-family-logo         = get_font_family('logo'), $font-family-base if get_font_family('logo')</div><div class="line"></div><div class="line">$font-family-headings     = $font-family-base</div><div class="line">$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')</div><div class="line"></div><div class="line">$font-family-posts        = $font-family-base</div><div class="line">$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')</div><div class="line"></div><div class="line">$font-family-monospace    = $font-family-chinese, monospace</div><div class="line">$font-family-monospace    = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes')</div></pre></div></div></figure>
<div class="note warning no-icon"><p>注意：要想 NexT 主题的简体中文字体配置生效，站点配置文件中的 language 必须为 zh-Hans。</p></div><br>然后对于英文字体，因为其字体库很小，所以想要个性化就简单多了。首先去 <a href="https://fonts.google.com/" rel="external nofollow noopener noreferrer" target="_blank">Google Fonts</a> 找自己喜欢的英文字体，然后编辑<span class="label success">主题配置文件</span>，可以查看一下 <a href="http://theme-next.iissnan.com/theme-settings.html#fonts-customization" rel="external nofollow noopener noreferrer" target="_blank">NexT 官方文档</a>。<br><br>下面附上我的供大家参考：<br><br><figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div></pre></div><div class="code"><pre><div class="line"><span class="attr">font:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"></div><div class="line">  <span class="comment"># Uri of fonts host. E.g. //fonts.googleapis.com (Default)</span></div><div class="line">  <span class="comment"># 亲测这个可用，如果不可用，自己搜索 [Google 字体 国内镜像]，找个能用的就行</span></div><div class="line"><span class="attr">  host:</span> <span class="attr">https://fonts.cat.net</span></div><div class="line"></div><div class="line">  <span class="comment"># Global font settings used on &lt;body&gt; element.</span></div><div class="line"><span class="attr">  global:</span></div><div class="line">    <span class="comment"># external: true will load this font family from host.</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Lato</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Headlines (h1, h2, h3, h4, h5, h6)</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  headings:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Roboto</span> <span class="string">Slab</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for posts</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line"><span class="attr">  posts:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for Logo</span></div><div class="line">  <span class="comment"># Fallback to `global` font settings.</span></div><div class="line">  <span class="comment"># The `size` option use `px` as unit</span></div><div class="line"><span class="attr">  logo:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span></div><div class="line"><span class="attr">    size:</span></div><div class="line"></div><div class="line">  <span class="comment"># Font settings for &lt;code&gt; and code blocks.</span></div><div class="line"><span class="attr">  codes:</span></div><div class="line"><span class="attr">    external:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    family:</span> <span class="string">Roboto</span> <span class="string">Mono</span></div><div class="line"><span class="attr">    size:</span></div></pre></div></div></figure><br><br><h2 id="进阶-高级功能配置"><a href="#进阶-高级功能配置" class="headerlink" title="进阶 高级功能配置"></a>进阶 高级功能配置</h2><br><div class="note warning"><p>这些功能的配置，大部分都要修改 NexT 主题的一些文件，所以git pull升级主题的时候，会比较麻烦，解决方法见本文 <a href="#更新主题">2.3.2</a> 节。 </p></div><br><h3 id="大佬的文章"><a href="#大佬的文章" class="headerlink" title="大佬的文章"></a>大佬的文章</h3><br><br>更多如外挂一样的功能配置，就直接贴大佬的文章了，哪些功能自己喜欢，按照大佬的教程来配置就行。不过也有坑，比如有些功能（超链接样式、侧栏头像圆形并旋转）可以直接通过在custom.styl添加 CSS 代码实现，无需更改其它文件！<br><br>1. hexo高阶教程next主题优化<br>2. hexo的next主题个性化教程:打造炫酷网站<br>3. Hexo搭建博客的个性化设置<br>4. 第一篇文章内有 NexT 主题的文件目录说明，这对自己自定义博客有很大帮助。<br><br><div class="note info no-icon"><p>tip：大佬的博客可不仅仅有一篇文章，多在上面逗留会，也许会有甜品。</p></div>


<h3 id="更改上一篇，下一篇的顺序"><a href="#更改上一篇，下一篇的顺序" class="headerlink" title="更改上一篇，下一篇的顺序"></a>更改上一篇，下一篇的顺序</h3><p>进入一篇文章，在文章底部，有上下篇的链接（&lt; &gt;），但是点 &gt; 发现进入的是页面中的的上面那篇文章，与操作习惯不符，别扭。</p>
<p>我猜这是从时间角度设计的，&gt; 英语叫 next，而 next 是更新的。不过别扭就改成习惯的好了，从空间位置角度设计。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>
<p>方法就是修改文件：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_macro/</span><span class="caption">post</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div></pre></div><div class="code"><pre><div class="line">&#123;% if not is_index and (post.prev or post.next) %&#125;</div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-nav"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-nav-next post-nav-item"</span>&gt;</span></div><div class="line diff-deletion">      &#123;% if post.next %&#125;</div><div class="line diff-addition">      &#123;% if post.prev %&#125;</div><div class="line diff-deletion">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.next.path) &#125;&#125;"</span> <span class="attr">rel</span>=<span class="string">"next"</span> <span class="attr">title</span>=<span class="string">"&#123;&#123; post.next.title &#125;&#125;"</span>&gt;</span></div><div class="line diff-addition">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.prev.path) &#125;&#125;"</span> <span class="attr">rel</span>=<span class="string">"prev"</span> <span class="attr">title</span>=<span class="string">"&#123;&#123; post.prev.title &#125;&#125;"</span>&gt;</span></div><div class="line diff-deletion">          <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-left"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> &#123;&#123; post.next.title &#125;&#125;</div><div class="line diff-addition">          <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-left"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> &#123;&#123; post.prev.title &#125;&#125;</div><div class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">      &#123;% endif %&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"post-nav-divider"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></div><div class="line"></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-nav-prev post-nav-item"</span>&gt;</span></div><div class="line diff-deletion">      &#123;% if post.prev %&#125;</div><div class="line diff-addition">      &#123;% if post.next %&#125;</div><div class="line diff-deletion">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.prev.path) &#125;&#125;"</span> <span class="attr">rel</span>=<span class="string">"prev"</span> <span class="attr">title</span>=<span class="string">"&#123;&#123; post.prev.title &#125;&#125;"</span>&gt;</span></div><div class="line diff-addition">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.next.path) &#125;&#125;"</span> <span class="attr">rel</span>=<span class="string">"next"</span> <span class="attr">title</span>=<span class="string">"&#123;&#123; post.next.title &#125;&#125;"</span>&gt;</span></div><div class="line diff-deletion">          &#123;&#123; post.prev.title &#125;&#125; <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-right"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line diff-addition">          &#123;&#123; post.next.title &#125;&#125; <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-right"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">      &#123;% endif %&#125;</div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">&#123;% endif %&#125;</div></pre></div></div></figure>
<h3 id="移动端显示-back-to-top-按钮和侧栏"><a href="#移动端显示-back-to-top-按钮和侧栏" class="headerlink" title="移动端显示 back-to-top 按钮和侧栏"></a>移动端显示 back-to-top 按钮和侧栏</h3><p>新版NexT已经添加这功能，前提是主题的设计模版是 Muse 或 Mist，然后可以直接在主题配置文件中配置：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Enable sidebar on narrow view</span></div><div class="line"><span class="attr">onmobile:</span> <span class="literal">true</span></div></pre></div></div></figure>
<p>如果你发现你的<span class="label success">主题配置文件</span><span class="label default">_config.yml</span>中没有这段内容，可以尝试按本文 <a href="#更新主题">2.3.2</a> 节的方法更新主题，或者按下面的方法。</p>
<div class="note danger"><p>[原方法]</p></div>

<p>个人感觉在移动端显示侧栏，有利于阅读，我的博客已经改了，你可以将浏览器窗口宽度缩小试试。还好 Google 到了一篇大佬的博客，想改的<a href="https://leaferx.github.io/2017/02/05/EnableTOConMobile/" rel="external nofollow noopener noreferrer" target="_blank">点击查看</a>吧。</p>
<div class="note info"><p>提示：最好还是更新主题，因为这样在移动端点击侧栏之外，侧栏会自动弹回，而按照上面的链接中的文章更改则无法实现。</p></div>

<h3 id="博客推广及谷歌搜索优化（必读）"><a href="#博客推广及谷歌搜索优化（必读）" class="headerlink" title="博客推广及谷歌搜索优化（必读）"></a>博客推广及谷歌搜索优化（必读）</h3><p>想自己写的文章被别人看到？希望得到别人的评论肯定？渴望用自己写的文章照亮他人，给整个文明光能？那么这个就不可或缺了。你能看到这篇文章，很大程度上也是因为这个。</p>
<h4 id="博客推广"><a href="#博客推广" class="headerlink" title="博客推广"></a>博客推广</h4><p>博客推广第一步，手动推广。</p>
<p>你可以多浏览别人的博客并留下你的爪印（博客地址），比如<a href="#footer">评论</a>本文；你可以去 <a href="https://github.com/iissnan/hexo-theme-next#live-preview" rel="external nofollow noopener noreferrer" target="_blank">README.md</a> 中提到的这个 <a href="https://github.com/iissnan/hexo-theme-next/issues/119" rel="external nofollow noopener noreferrer" target="_blank">issue</a> 留下你的爪印；你可以去 <a href="https://github.com/iissnan/hexo-theme-next/issues" rel="external nofollow noopener noreferrer" target="_blank">Issues</a> 页面试着回答下大家的问题并留下你的爪印。</p>
<p>博客推广第二步，<a href="https://baike.baidu.com/item/SEO" rel="external nofollow noopener noreferrer" target="_blank">SEO</a>（Search Engine Optimization）。</p>
<h4 id="搜索引擎"><a href="#搜索引擎" class="headerlink" title="搜索引擎"></a>搜索引擎</h4><p>搜索引擎是互联网上寻找资源的重要手段，而要让别人能够在搜索结果中看到自己的博客文章链接，就必须让搜索引擎收录，怎么操作呢？</p>
<p>直接参考<a href="http://www.ehcoo.com/seo.html" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>，学会使用站长工具抓取自己的网页，然后请求搜索引擎收录。博主也是刚接触不久，不太懂，但推荐提交次数尽量多，而且每天尽量都提交一次。</p>
<h4 id="间接影响"><a href="#间接影响" class="headerlink" title="间接影响"></a>间接影响</h4><div class="note info"><p>另外，SEO 固然重要，但不要小看另一种影响，相比搜索引擎，这种可以称之为间接影响。</p></div>

<p>这篇文章是一篇技术性的文章，而技术人员经常会用 Google，所以对这篇文章的浏览量，搜索引擎的功劳较大。但是，如果是其他的文章，比如一首诗，那么直接通过 Google 访问的读者几乎没有，那读者哪来？从其它文章上的读者“流”过来的。因为读者浏览着的不是一篇文章，而是一个博客。</p>
<p>而想让博客上的几乎不可能被 Google 的一首诗被浏览，就要这样间接拉读者了，可以称之“引流”。首先对博客上的每篇文章来说，肯定是读者花在自己博客的时间越长，被读到的可能性越大。这就意味着你要尽可能把用户留在自己的博客上，怎么留？</p>
<ol>
<li>博客要装饰好</li>
<li>文章质量要高</li>
</ol>
<p>读者的第二印象是博客的界面，如果界面够特别，也许马上就被加入了书签。第三印象是文章内容，这其实更加重要，如果文章质量很高，那么读者肯定不会让这么好的一篇文章消失在自己的记忆中，即使界面不咋地。第一印象？加载速度，试想点开半天还是空白，那么肯定马上关了。</p>
<p>如果做到上面三点，那么就算好不容易“骗”到一个 Google 浏览量，但是这个读者马上被博客和文章惊呆了，看完文章后，这读者心里美滋滋，认为这么好的文章（博客）必须分享啊，于是可能马上来了一大批满怀期待的读者，然后这批读者又……这时文章的读者数（博客的访问量）就不是简单的加法了～</p>
<h4 id="知识平台"><a href="#知识平台" class="headerlink" title="知识平台"></a>知识平台</h4><p>直接或间接因为 Google 这样的搜索引擎而来的读者，绝大部分都是技术人员，而他们只希望尽快解决自己的技术问题，这也是他们的目的，这就意味着博客上的一首诗还是很难被欣赏。</p>
<p>而要想照亮他人，他人必须要能懂自己的文章，这样也才可能有更强的交互——评论。所以为了不浪费自己的光能，能把自己的光能完完整整的贡献给文明，那就必须也让一首诗也有评论，怎么做呢？让读者的类型多样化，不限于技术人员。</p>
<p>还好现在大部分读者也不用搜索引擎了，谁在吞食搜索引擎的用户？移动端。智能手机的迅速普及导致搜索引擎已经不是人们获取知识的主要途径，大部分人已经将手机 APP 上的知识平台作为自己获取知识的主要途径，比如：知乎、简书、微信订阅号……所以，你还可以将自己的文章发布在这些知识平台上的相应分类上，然后留个博客链接，吸引更多类型的读者～</p>
<h4 id="谷歌分析"><a href="#谷歌分析" class="headerlink" title="谷歌分析"></a>谷歌分析</h4><p>你怎么知道自己推广的效果？你怎么知道有没有人看了自己的博客？哪篇文章最受欢迎？此时有没有人正浏览着自己的博客？自己的文章有没有被引用？这时最常用的就是强大免费的 <a href="https://analytics.google.com/" rel="external nofollow noopener noreferrer" target="_blank">Google Analytics</a>，推荐博客建好后，就立即使用。</p>
<p>如何使用？请务必自备梯子查看 <a href="https://analytics.google.com/analytics/academy/course/6" rel="external nofollow noopener noreferrer" target="_blank">Google 官方的教程</a>，开始使用后一定要按照里面的设置，先添加多份 view（数据视图）。</p>
<p><strong><span class="label warning">ATTENTION</span></strong>：虽然有个复制 view 选项，但由 Google Analytics（分析）帮助中的<a href="https://support.google.com/analytics/answer/3256366?hl=zh-Hans" rel="external nofollow noopener noreferrer" target="_blank">具体复制内容</a>再加上我的实践，发现（用我这个外行人的话来说）：复制 view 时只会复制它的相关配置，不会复制数据！所以请使用后立即按照官方教程中的方式添加 view ！</p>
<p><img src="https://codenote.oss-cn-beijing.aliyuncs.com/google-analytics.png" alt=""></p>
<p>博客刚起步，博客的大部分访客都是自己，所以必须添加一个 filter（过滤器），过滤掉自己的访问（比如：过滤掉自己科学上网服务器的 IP）。</p>
<p><strong><span class="label warning">ATTENTION</span></strong>：由 Google Analytics（分析）的<a href="https://support.google.com/analytics/answer/6383007" rel="external nofollow noopener noreferrer" target="_blank">工作原理</a>可知，filter 是在数据处理时生效的（如上图），也就是说添加 filter 后只能过滤添加它之后的数据，而无法过滤添加它之前的数据（处理后），而 view 是利用处理后的数据生成的，所以要想去除自己访问的影响（在 view 中看不到自己的访问），请添加 view 之后就立即添加 filter ！</p>
<h3 id="时间轴页面的年份分隔"><a href="#时间轴页面的年份分隔" class="headerlink" title="时间轴页面的年份分隔"></a>时间轴页面的年份分隔</h3><p>在 Archives（归档）页面，文章之间有年份分隔，而某一个 category 和 tag 的时间轴页面却没有。怎么办呢？修改两个文件，加代码即可relieved～</p>
<h4 id="category"><a href="#category" class="headerlink" title="category"></a>category</h4><p>加到哪？要加两个位置：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/</span><span class="caption">category</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></div><div class="code"><pre><div class="line">    &#123;% for post in page.posts %&#125;</div><div class="line marked">              位置A</div><div class="line">      &#123;&#123; post_template.render(post) &#125;&#125;</div><div class="line">    &#123;% endfor %&#125;</div><div class="line">.</div><div class="line">.</div><div class="line">.（省略好多行）</div><div class="line">.</div><div class="line">.</div><div class="line marked">位置B（没错最后面）</div></pre></div></div></figure>
<p>加什么？绿色的自己看着加：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/</span><span class="caption">category</span><span class="suffix">.swig</span><a href="https://gist.github.com/anonymous/5c45ad50787666266ff6e5cf987be146|我不要加+号" target="_blank" rel="external nofollow noopener noreferrer">link</a></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></div><div class="code"><pre><div class="line">    &#123;% for post in page.posts %&#125;</div><div class="line">+</div><div class="line diff-addition">      &#123;# Show year #&#125;</div><div class="line diff-addition">      &#123;% set year %&#125;</div><div class="line diff-addition">      &#123;% set post.year = date(post.date, 'YYYY') %&#125;</div><div class="line">+</div><div class="line diff-addition">      &#123;% if post.year !== year %&#125;</div><div class="line diff-addition">        &#123;% set year = post.year %&#125;</div><div class="line diff-addition">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"collection-title"</span>&gt;</span></div><div class="line diff-addition">          <span class="tag">&lt;<span class="name">h2</span> <span class="attr">class</span>=<span class="string">"archive-year motion-element"</span> <span class="attr">id</span>=<span class="string">"archive-year-&#123;&#123; year &#125;&#125;"</span>&gt;</span>&#123;&#123; year &#125;&#125;<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></div><div class="line diff-addition">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line diff-addition">      &#123;% endif %&#125;</div><div class="line diff-addition">      &#123;# endshow #&#125;</div><div class="line">+</div><div class="line">      &#123;&#123; post_template.render(post) &#125;&#125;</div><div class="line">    &#123;% endfor %&#125;</div><div class="line">.</div><div class="line">.</div><div class="line">.（省略好多行）</div><div class="line">.</div><div class="line">.</div><div class="line diff-addition">&#123;% block script_extra %&#125;</div><div class="line diff-addition">  &#123;% if theme.use_motion %&#125;</div><div class="line diff-addition">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">id</span>=<span class="string">"motion.page.archive"</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">+      $(<span class="string">'.archive-year'</span>).velocity(<span class="string">'transition.slideLeftIn'</span>);</span></div><div class="line"><span class="undefined">+    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line diff-addition">  &#123;% endif %&#125;</div><div class="line diff-addition">&#123;% endblock %&#125;</div></pre></div></div></figure>
<h4 id="tag"><a href="#tag" class="headerlink" title="tag"></a>tag</h4><p>文件位置：<span class="label default">~/blog/themes/next/layout/tag.swig</span>，其它与的 category 修改完全一样。</p>
<h4 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h4><p>两段代码直接 Copy 同目录下的 archive.swig 文件里面的，而且 tag.swig 和 category.swig 好像都预留了位置似的，代码小白的我折腾了半天，才改好，不知道写代码的大佬怎么想的w(ﾟДﾟ)w～</p>
<h3 id="文章底部加上评分小星星"><a href="#文章底部加上评分小星星" class="headerlink" title="文章底部加上评分小星星"></a>文章底部加上评分小星星</h3><p>淘宝买东西，作为消费者的我们，看评价很重要。现在作为博主，写了一篇文章，很期待读者的反馈。而与淘宝一样，确认收货后，相比评论，更愿意五星好评。那么博客文章怎么加上呢？</p>
<p>首先打开<span class="label success">主题配置文件</span>：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Star rating support to each article.</span></div><div class="line"><span class="comment"># To get your ID visit https://widgetpack.com</span></div><div class="line"><span class="attr">rating:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  id:</span></div><div class="line"><span class="attr">  color:</span> <span class="string">f79533</span></div></pre></div></div></figure>
<p>先去注释中的网站，首页点 Rating，然后注册个帐号，填一下自己博客的信息，左上角有个 ID，填进<span class="label success">主题配置文件</span>中就行，<span class="label default">color</span>改成自己喜欢的即可。另：</p>
<p>可以配置评分方式，侧栏 &gt; Rating &gt; Setting，建议用 IP address 或 Device(cookie)，免登录，毕竟 Socials 里面的选项几乎都被墙，不适合国内网络环境。<br>建议 侧栏 &gt; Site &gt; Setting 中勾选 Private 选项。<br>上面两步勾选后别忘了点击页面右下方的 <strong><span class="label success">SAVE SETTING</span></strong> 绿色按钮保存。<br>如果感觉上下留白太多，咋整？浏览器 F12 找元素，调成自己喜欢的值，然后 Copy 到<span class="label default">custom.styl</span>即可，参考本文 <a href="#附上我的 custom.styl">4.2</a> 节。</p>
<div class="note primary"><p>经过上面的配置，默认最下面只会显示 5 颗小星星，简洁但不明了，怎么加上文字说明呢？</p></div>

<p>首先打开文件：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_macro/</span><span class="caption">post</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line">        &#123;% if theme.rating.enable %&#125;</div><div class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"wp_rating"</span>&gt;</span></div><div class="line diff-addition">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px"</span>&gt;</span>(&amp;gt;看完记得五星好评哦亲&amp;lt;)<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"wpac-rating"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">        &#123;% endif %&#125;</div></pre></div></div></figure>
<p>然后 Ctrl + F 搜索<span class="label default">rating</span>，找到这段，对比我给出的，在绿色这行所示的位置，加上自己想要的说明和样式即可。</p>
<h3 id="侧栏加入已运行的时间"><a href="#侧栏加入已运行的时间" class="headerlink" title="侧栏加入已运行的时间"></a>侧栏加入已运行的时间</h3><p>我们都有自己的生日，都知道自己的岁数，那为什么不给博客加上，让读者知道博客的年纪呢？操作很简单，而且不是精确到年而是精确到秒，233333～</p>
<p>首先要加入下面代码:<sup id="fnref:2"><a href="#fn:2" rel="footnote">2</a></sup></p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_custom/</span><span class="caption">sidebar</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"days"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">show_date_time</span>(<span class="params"></span>)</span>&#123;</span></div><div class="line"><span class="javascript"><span class="built_in">window</span>.setTimeout(<span class="string">"show_date_time()"</span>, <span class="number">1000</span>);</span></div><div class="line"><span class="javascript">BirthDay=<span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"05/27/2017 15:13:14"</span>);</span></div><div class="line"><span class="javascript">today=<span class="keyword">new</span> <span class="built_in">Date</span>();</span></div><div class="line"><span class="undefined">timeold=(today.getTime()-BirthDay.getTime());</span></div><div class="line"><span class="undefined">sectimeold=timeold/1000</span></div><div class="line"><span class="javascript">secondsold=<span class="built_in">Math</span>.floor(sectimeold);</span></div><div class="line"><span class="undefined">msPerDay=24*60*60*1000</span></div><div class="line"><span class="undefined">e_daysold=timeold/msPerDay</span></div><div class="line"><span class="javascript">daysold=<span class="built_in">Math</span>.floor(e_daysold);</span></div><div class="line"><span class="undefined">e_hrsold=(e_daysold-daysold)*24;</span></div><div class="line"><span class="javascript">hrsold=setzero(<span class="built_in">Math</span>.floor(e_hrsold));</span></div><div class="line"><span class="undefined">e_minsold=(e_hrsold-hrsold)*60;</span></div><div class="line"><span class="javascript">minsold=setzero(<span class="built_in">Math</span>.floor((e_hrsold-hrsold)*<span class="number">60</span>));</span></div><div class="line"><span class="javascript">seconds=setzero(<span class="built_in">Math</span>.floor((e_minsold-minsold)*<span class="number">60</span>));</span></div><div class="line"><span class="javascript"><span class="built_in">document</span>.getElementById(<span class="string">'days'</span>).innerHTML=<span class="string">"已运行"</span>+daysold+<span class="string">"天"</span>+hrsold+<span class="string">"小时"</span>+minsold+<span class="string">"分"</span>+seconds+<span class="string">"秒"</span>;</span></div><div class="line"><span class="undefined">&#125;</span></div><div class="line"><span class="javascript"><span class="function"><span class="keyword">function</span> <span class="title">setzero</span>(<span class="params">i</span>)</span>&#123;</span></div><div class="line"><span class="javascript"><span class="keyword">if</span> (i&lt;<span class="number">10</span>)</span></div><div class="line"><span class="javascript">&#123;i=<span class="string">"0"</span> + i&#125;;</span></div><div class="line"><span class="javascript"><span class="keyword">return</span> i;</span></div><div class="line"><span class="undefined">&#125;</span></div><div class="line"><span class="undefined">show_date_time();</span></div><div class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div></pre></div></div></figure>
<p>上面<span class="label default">Date</span>的值记得改为你自己的，且按上面格式，然后修改：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_macro/</span><span class="caption">sidebar</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></div><div class="code"><pre><div class="line">        &#123;# Blogroll #&#125;</div><div class="line">        &#123;% if theme.links %&#125;</div><div class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"links-of-blogroll motion-element &#123;&#123; "</span><span class="attr">links-of-blogroll-</span>" + <span class="attr">theme.links_layout</span> | <span class="attr">default</span>('<span class="attr">inline</span>') &#125;&#125;"&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"links-of-blogroll-title"</span>&gt;</span></div><div class="line">              <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa  fa-fw fa-&#123;&#123; theme.links_icon | default('globe') | lower &#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">              &#123;&#123; theme.links_title &#125;&#125;&amp;nbsp;</div><div class="line">              <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa  fa-fw fa-&#123;&#123; theme.links_icon | default('globe') | lower &#125;&#125;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"links-of-blogroll-list"</span>&gt;</span></div><div class="line">              &#123;% for name, link in theme.links %&#125;</div><div class="line">                <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"links-of-blogroll-item"</span>&gt;</span></div><div class="line">                  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; link &#125;&#125;"</span> <span class="attr">title</span>=<span class="string">"&#123;&#123; name &#125;&#125;"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span>&#123;&#123; name &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line">              &#123;% endfor %&#125;</div><div class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div><div class="line diff-addition">        &#123;% include '../_custom/sidebar.swig' %&#125;</div><div class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">         &#123;% endif %&#125;</div><div class="line"></div><div class="line diff-deletion">        &#123;% include '../_custom/sidebar.swig' %&#125;</div></pre></div></div></figure>
<p>这样就可以了！当然，要是不喜欢颜色，感觉不好看，就可以在上文所提的<span class="label default">custom.styl</span>加入：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line">// 自定义的侧栏时间样式</div><div class="line"><span class="selector-id">#days</span> &#123;</div><div class="line">    <span class="attribute">display</span>: block;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(7, 179, 155);</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">13px</span>;</div><div class="line">    <span class="attribute">margin-top</span>: <span class="number">15px</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<p>里面的值 F12 调成自己喜欢的，然后更改即可。要是不想放在侧栏，想放在页脚，自己应该能折腾了吧</p>
<h3 id="添加-TopX-页面"><a href="#添加-TopX-页面" class="headerlink" title="添加 TopX 页面"></a>添加 TopX 页面</h3><p>博客已有的分类，如 categories 和 tags，都是基于博主的，那么有没有一种分类是基于读者的呢？有，一种是搜索，另一种就是这里的文章阅读量排行榜。</p>
<div class="note danger"><p>前提是在<span class="label success">主题配置文件</span>中配置了 leancloud_visitors，配置方法见本文 <a href="#主题配置文件">3.3</a> 节中我的<span class="label success">主题配置文件</span>中的教程链接。</p></div>

<p>首先新建页面：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">hexo new page <span class="string">"top"</span></div></pre></div></div></figure>
<p>然后在<span class="label success">主题配置文件</span>中加上菜单 top 和它的 icon：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line"><span class="attr">menu:</span></div><div class="line"><span class="attr">  top:</span> <span class="string">/top/</span> <span class="string">||</span> <span class="string">signal</span></div></pre></div></div></figure>
<p>接着在语言翻译文件中加上菜单 top：</p>
<div class="note warning"><p>注意：如果你的<span class="label info">站点配置文件</span>中的 languages 写的不是 zh-Hans，那么这里请更改相应语言配置文件。</p></div>

<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/languages/</span><span class="caption">zh_Hans</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></div><div class="code"><pre><div class="line"><span class="attr">menu:</span></div><div class="line"><span class="attr">  home:</span> <span class="string">首页</span></div><div class="line"><span class="attr">  archives:</span> <span class="string">归档</span></div><div class="line"><span class="attr">  categories:</span> <span class="string">分类</span></div><div class="line"><span class="attr">  tags:</span> <span class="string">标签</span></div><div class="line"><span class="attr">  about:</span> <span class="string">关于</span></div><div class="line"><span class="attr">  search:</span> <span class="string">搜索</span></div><div class="line"><span class="attr">  schedule:</span> <span class="string">日程表</span></div><div class="line"><span class="attr">  sitemap:</span> <span class="string">站点地图</span></div><div class="line"><span class="attr">  commonweal:</span> <span class="string">公益404</span></div><div class="line"><span class="attr">  top:</span> <span class="string">TopX</span> <span class="string">/*</span> <span class="string">可以不为</span> <span class="string">TopX，随便取</span> <span class="string">*/</span></div></pre></div></div></figure>
<p>最后，编辑第一步新建页面生成的文件：<sup id="fnref:3"><a href="#fn:3" rel="footnote">3</a></sup></p>
<figure class="highlight markdown"><figcaption><span class="fileDir">文件位置：~/blog/source/top/</span><span class="caption">index</span><span class="suffix">.md</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div></pre></div><div class="code"><pre><div class="line">---</div><div class="line">title: TopX /<span class="bullet">* 可以不为 TopX，随便取 *</span>/</div><div class="line">comments: false</div><div class="line">keywords: top,文章阅读量排行榜</div><div class="line">description: 博客文章阅读量排行榜</div><div class="line">---</div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"top"</span>&gt;</span></span><span class="xml"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"</span>&gt;</span><span class="undefined"></span></span><span class="xml"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></span>AV.initialize("app<span class="emphasis">_id", "app_</span>key");<span class="xml"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></span></div><div class="line">  var time=0</div><div class="line">  var title=""</div><div class="line">  var url=""</div><div class="line">  var query = new AV.Query('Counter');</div><div class="line">  query.notEqualTo('id',0);</div><div class="line">  query.descending('time');</div><div class="line">  query.limit(1000);</div><div class="line">  query.find().then(function (todo) &#123;</div><div class="line"><span class="code">    for (var i=0;i&lt;1000;i++)&#123;</span></div><div class="line"><span class="code">      var result=todo[i].attributes;</span></div><div class="line"><span class="code">      time=result.time;</span></div><div class="line"><span class="code">      title=result.title;</span></div><div class="line"><span class="code">      url=result.url;</span></div><div class="line"><span class="code">      var content="&lt;a href='"+"https://reuixiy.github.io"+url+"'&gt;"+title+"&lt;/a&gt;"+"&lt;br /&gt;"+"&lt;font color='#555'&gt;"+"阅读次数："+time+"&lt;/font&gt;"+"&lt;br /&gt;&lt;br /&gt;";</span></div><div class="line"><span class="code">      document.getElementById("top").innerHTML+=content</span></div><div class="line"><span class="code">    &#125;</span></div><div class="line">  &#125;, function (error) &#123;</div><div class="line"><span class="code">    console.log("error");</span></div><div class="line">  &#125;);</div><div class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></div><div class="line"></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span>.post-description &#123; display: none; &#125;<span class="xml"><span class="xml"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="undefined"></span></span></span></div></pre></div></div></figure>
<p>必须将里面的里面的<span class="label default">app_id</span>和<span class="label default">app_key</span>替换为你的主题配置文件中的值，必须替换里面博客的链接，<span class="label default">1000</span>是显示文章的数量，其它可以自己看情况更改。</p>
<p>最后，修改样式可以在<span class="label default">custom.styl</span>中加入自定义代码，参考本文 <a href="#附上我的 custom.styl">4.2</a> 节。</p>
<p>Okay! 完成了！不过还有几点需要注意：</p>
<ol>
<li>如果在 设置 &gt; 安全中心 中，设置了 Web 安全域名，但没有将<span class="label default">http://localhost:4000</span> 加入，那么本地调试将看不到，可以先将之加入，调试完后删除。</li>
<li>如果你发现文章标题显示不对，这是由于更改过文章标题导致的，在 存储 &gt; Counter 双击<span class="label default">title</span>修改即可。</li>
</ol>
<p>另外，应该也可以按类似的方式，利用 JS 代码，将评分（rating）高 / 多的文章，评论（HyperComments）多的文章，也加入这个页面，不过现在博客的阅读量还不多，我暂时没折腾（其实也不太会）。如果你实现了，麻烦告诉我哦</p>
<p>注意：如果你的博客使用了 Valine 评论系统，那么可能会有代码冲突问题，解决方法见<a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2018/07/15/use-valine-in-theme-next.html" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>。</p>
<h3 id="利用-gulp-压缩代码"><a href="#利用-gulp-压缩代码" class="headerlink" title="利用 gulp 压缩代码"></a>利用 gulp 压缩代码</h3><p>右键查看网页源代码发现有大量留白，咋整？利用 gulp。</p>
<p>首先任意目录全局安装：<sup id="fnref:4"><a href="#fn:4" rel="footnote">4</a></sup></p>
<figure class="highlight bash"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install gulp -g</div></pre></div></div></figure>
<p>然后到站点文件夹根目录：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install gulp gulp-minify-css gulp-htmlmin gulp-htmlclean --save</div></pre></div></div></figure>
<p>接着在站点文件夹根目录新建 gulpfile.js：</p>
<figure class="highlight js"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">gulpfile</span><span class="suffix">.js</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></div><div class="code"><pre><div class="line"><span class="keyword">var</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</div><div class="line"><span class="keyword">var</span> minifycss = <span class="built_in">require</span>(<span class="string">'gulp-minify-css'</span>);</div><div class="line"><span class="keyword">var</span> htmlmin = <span class="built_in">require</span>(<span class="string">'gulp-htmlmin'</span>);</div><div class="line"><span class="keyword">var</span> htmlclean = <span class="built_in">require</span>(<span class="string">'gulp-htmlclean'</span>);</div><div class="line">gulp.task(<span class="string">'minify-css'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.css'</span>)</div><div class="line">        .pipe(minifycss())</div><div class="line">        .pipe(gulp.dest(<span class="string">'./public'</span>))</div><div class="line">&#125;);</div><div class="line">gulp.task(<span class="string">'minify-html'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">  <span class="keyword">return</span> gulp.src(<span class="string">'./public/**/*.html'</span>)</div><div class="line">    .pipe(htmlclean())</div><div class="line">    .pipe(htmlmin(&#123;</div><div class="line">         removeComments: <span class="literal">true</span>,</div><div class="line">         minifyJS: <span class="literal">true</span>,</div><div class="line">         minifyCSS: <span class="literal">true</span>,</div><div class="line">         minifyURLs: <span class="literal">true</span></div><div class="line">    &#125;))</div><div class="line">    .pipe(gulp.dest(<span class="string">'./public'</span>))</div><div class="line">&#125;);</div><div class="line">gulp.task(<span class="string">'default'</span>, [<span class="string">'minify-html'</span>, <span class="string">'minify-css'</span>]);</div></pre></div></div></figure>
<p>最后部署到 GitHub Pages 上查看效果：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">hexo clean &amp;&amp; hexo g &amp;&amp; gulp &amp;&amp; hexo d</div></pre></div></div></figure>
<p>我没有压缩 JavaScript，因为我发现会报错，实际也并不需要，因为大部分 JavaScript 都已压缩过。</p>
<div class="note warning"><p>这里的这段代码执行 gulp 后不支持 hexo s 本地调试，记得在哪看过解决方法，需要的自己 Google。</p></div>

<p>另外，可能会产生一些奇怪的 bugs，没看到最好，要是看到了的话就自己解决吧～[逃……]</p>
<h3 id="让页脚的心跳动起来"><a href="#让页脚的心跳动起来" class="headerlink" title="让页脚的心跳动起来"></a>让页脚的心跳动起来</h3><p>世界上有一种伟大的力量，它的名字无人不晓，就是……爱～</p>
<p>更新 NexT 主题后，发现默认的<span class="label default">icon</span>变成了<i class="fa fa-user"></i>（user），不过这可阻挡不了爱的力量！</p>
<p>看看<a href="#heart">效果</a>，首先编辑<span class="label success">主题配置文件</span>：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line"><span class="attr">footer:</span></div><div class="line"><span class="attr">-  icon:</span> <span class="string">user</span></div><div class="line"><span class="string">+</span>  <span class="attr">icon:</span> <span class="string">heart</span></div></pre></div></div></figure>
<p>然后编辑：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_partials/</span><span class="caption">footer</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line">- <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"with-love"</span>&gt;</span></div><div class="line">+ <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"with-love"</span> <span class="attr">id</span>=<span class="string">"heart"</span>&gt;</span></div></pre></div></div></figure>
<p>接着编辑<span class="label default">custom.styl</span>，加入：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></div><div class="code"><pre><div class="line">// 自定义页脚跳动的心样式</div><div class="line">@<span class="keyword">keyframes</span> heartAnimate &#123;</div><div class="line">    0%,100%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1);&#125;</div><div class="line">    10%,30%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(0.9);&#125;</div><div class="line">    20%,40%,60%,80%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);&#125;</div><div class="line">    50%,70%&#123;<span class="attribute">transform</span>:<span class="built_in">scale</span>(1.1);&#125;</div><div class="line">&#125;</div><div class="line"><span class="selector-id">#heart</span> &#123;</div><div class="line">    <span class="attribute">animation</span>: heartAnimate <span class="number">1.33s</span> ease-in-out infinite;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.with-love</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(255, 113, 168);</div><div class="line">&#125;</div></pre></div></div></figure>
<p>color 的值可以改成你自己喜欢的，灵感来自 <a href="https://diygod.me/" rel="external nofollow noopener noreferrer" target="_blank">DIYgod</a> 大佬的博客，CSS 代码参考<a href="http://www.jianshu.com/p/73b46c376188" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>。</p>
<h3 id="页脚加上微信二维码"><a href="#页脚加上微信二维码" class="headerlink" title="页脚加上微信二维码"></a>页脚加上微信二维码</h3><p>主题默认的微信订阅个人感觉不美观，看到很多网站都是在页脚有个微信的 Logo，然后鼠标移动到上面便会显示二维码，这样感觉很棒。</p>
<p>首先编辑文件，在文件最后加上下面代码：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_partials/</span><span class="caption">footer</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weixin-box"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weixin-menu"</span>&gt;</span></div><div class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weixin-hover"</span>&gt;</span></div><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"weixin-description"</span>&gt;</span>微信扫一扫，订阅本博客<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<p>然后编辑<span class="label default">custom.styl</span>，加入：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div></pre></div><div class="code"><pre><div class="line">// 自定义的页脚微信订阅号样式</div><div class="line"><span class="selector-class">.weixin-box</span> &#123;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">43px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">10px</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">5px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span> &#123;</div><div class="line">    <span class="attribute">position</span>: relative;</div><div class="line">    <span class="attribute">height</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">cursor</span>: pointer;</div><div class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(https://微信的logo.svg);</div><div class="line">    <span class="attribute">background-size</span>: <span class="number">24px</span> <span class="number">24px</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-hover</span> &#123;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">box-shadow</span>: <span class="number">0px</span> <span class="number">0px</span> <span class="number">10px</span> <span class="number">0px</span> <span class="built_in">rgba</span>(0, 0, 0, 0.35);</div><div class="line">    <span class="attribute">background</span>: <span class="built_in">url</span>(https://二维码.svg);</div><div class="line">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</div><div class="line">    <span class="attribute">background-repeat</span>: no-repeat;</div><div class="line">    <span class="attribute">background-size</span>: <span class="number">150px</span> <span class="number">150px</span>;</div><div class="line">    <span class="attribute">transition</span>: all <span class="number">0.35s</span> ease-in-out;</div><div class="line">    <span class="attribute">z-index</span>: <span class="number">1024</span>;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.weixin-hover</span> &#123;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">24px</span>;</div><div class="line">    <span class="attribute">height</span>: <span class="number">170px</span>;</div><div class="line">    <span class="attribute">width</span>: <span class="number">150px</span>;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-description</span> &#123;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">0</span>;</div><div class="line">    <span class="attribute">position</span>: absolute;</div><div class="line">    <span class="attribute">bottom</span>: <span class="number">3%</span>;</div><div class="line">    <span class="attribute">left</span>: <span class="number">5%</span>;</div><div class="line">    <span class="attribute">right</span>: <span class="number">5%</span>;</div><div class="line">    <span class="attribute">font-size</span>: <span class="number">12px</span>;</div><div class="line">    <span class="attribute">transition</span>: all <span class="number">0.35s</span> <span class="built_in">cubic-bezier</span>(1, 0, 0, 1);</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.weixin-menu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.weixin-description</span> &#123;</div><div class="line">    <span class="attribute">opacity</span>: <span class="number">1</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<div class="note warning"><p>图片务必用矢量图 svg 格式，否则手机上显示效果很差，其它的自己看情况更改。</p></div>

<p>微信 Logo 的图片我准备好了，点击下载 wechat.svg (1.6 KB)。</p>
<figure class="highlight plain"><figcaption><span class="caption">下载地址（右键另存为）</span><a href="https://codenote.oss-cn-beijing.aliyuncs.com/wechat.svg" download="" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-download" aria-hidden="true"></i> download</a></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">https://codenote.oss-cn-beijing.aliyuncs.com/wechat.svg</div></pre></div></div></figure>
<p>微信订阅号的二维码怎么弄成 svg 格式呢，安利个<a href="https://cli.im/weixin" rel="external nofollow noopener noreferrer" target="_blank">网站</a>，下载 svg 格式的就行。</p>
<p>我参考了<a href="https://codepen.io/hj624608494/pen/dpQyJo" rel="external nofollow noopener noreferrer" target="_blank">这个代码</a>，欢迎<a href="#footer">扫一扫订阅我的博客</a>哦～</p>
<h3 id="更改标签云（tagcloud）的颜色"><a href="#更改标签云（tagcloud）的颜色" class="headerlink" title="更改标签云（tagcloud）的颜色"></a>更改标签云（tagcloud）的颜色</h3><p>如果你和我一样个性化了博客的整体布局颜色，那么默认的标签云页面可能看起来很丑，怎么更改？</p>
<p>修改下文件：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/</span><span class="caption">page</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;&#123; tagcloud(&#123;min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'&#125;) &#125;&#125;</div></pre></div></div></figure>
<p>修改对应参数值即可，参数说明见 <a href="https://hexo.io/zh-cn/docs/helpers.html#tagcloud" rel="external nofollow noopener noreferrer" target="_blank">Hexo 官方文档</a>，颜色可以参考<a href="https://uigradients.com/" rel="external nofollow noopener noreferrer" target="_blank">这个网站</a>，自己去纠结……</p>
<h3 id="点击侧栏头像回到博客首页"><a href="#点击侧栏头像回到博客首页" class="headerlink" title="点击侧栏头像回到博客首页"></a>点击侧栏头像回到博客首页</h3><p>不知道为什么，我看到侧栏头像的第一反应是点击，然后心理预期会跳到博客首页，可惜也仅是预期，那么开始动手吧～</p>
<p>首先要在<span class="label success">主题配置文件</span>中配置好，比如我把头像<span class="label default">avatar.gif</span>放在<span class="label default">~/blog/source/uploads/</span>下，则：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Sidebar Avatar</span></div><div class="line"><span class="comment"># in theme directory(source/images): /images/avatar.gif</span></div><div class="line"><span class="comment"># in site  directory(source/uploads): /uploads/avatar.gif</span></div><div class="line"><span class="bullet">-</span><span class="comment">#avatar: /images/avatar.gif</span></div><div class="line"><span class="string">+avatar:</span> <span class="string">/uploads/avatar.gif</span></div></pre></div></div></figure>
<p>然后编辑文件：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_macro/</span><span class="caption">sidebar</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line diff-addition">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/"</span>&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">img</span> <span class="attr">class</span>=<span class="string">"site-author-image"</span> <span class="attr">itemprop</span>=<span class="string">"image"</span></span></div><div class="line"><span class="tag">               <span class="attr">src</span>=<span class="string">"&#123;&#123; url_for( theme.avatar | default(theme.images + '/avatar.gif') ) &#125;&#125;"</span></span></div><div class="line"><span class="tag">               <span class="attr">alt</span>=<span class="string">"&#123;&#123; theme.author &#125;&#125;"</span> /&gt;</span></div><div class="line diff-addition">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></div></pre></div></div></figure>
<p>最后就 OK 了～</p>
<h3 id="文章摘要图片"><a href="#文章摘要图片" class="headerlink" title="文章摘要图片"></a>文章摘要图片</h3><p>俗话说：“图文并茂”，现实中用笔书写文章实现起来比较困难，但在博客上可以很轻松实现。</p>
<p>首先，文章摘要（excerpt）是指每篇文章在页面（page）上显示的那部分内容，也就是 [Read More] 之前的文章内容。由于它会展示在页面，因此在每篇文章的文章摘要中加一张图片，页面看起来就很美观。</p>
<p>但是有时候可能会出现一个问题：你想从文章中选一张图片作为文章摘要图片，而这张图片由于写作要求，必须添加在文章的末尾，这样点 [Read More] 查看文章时，这张图片就会重复出现了。咋办？</p>
<p>前提是在<span class="label success">主题配置文件</span>中：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></div><div class="code"><pre><div class="line"><span class="attr">excerpt_description:</span> <span class="literal">false</span></div><div class="line"></div><div class="line"><span class="attr">auto_excerpt:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">false</span></div></pre></div></div></figure>
<p>首先加代码：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_macro/</span><span class="caption">post</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div></pre></div><div class="code"><pre><div class="line">      &#123;% if is_index %&#125;</div><div class="line">        &#123;% if post.description and theme.excerpt_description %&#125;</div><div class="line">          &#123;&#123; post.description &#125;&#125;</div><div class="line">          <span class="comment">&lt;!--noindex--&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-button text-center"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.path) &#125;&#125;"</span>&gt;</span></div><div class="line">              &#123;&#123; __('post.read_more') &#125;&#125; &amp;raquo;</div><div class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">          <span class="comment">&lt;!--/noindex--&gt;</span></div><div class="line">        &#123;% elif post.excerpt  %&#125;</div><div class="line">          &#123;&#123; post.excerpt &#125;&#125;</div><div class="line">+</div><div class="line diff-addition">        &#123;% if post.image %&#125;</div><div class="line diff-addition">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"out-img-topic"</span>&gt;</span></div><div class="line diff-addition">          <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&#123;&#123;</span> <span class="attr">post.image</span> &#125;&#125; <span class="attr">class</span>=<span class="string">"img-topic"</span> /&gt;</span></div><div class="line diff-addition">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line diff-addition">        &#123;% endif %&#125;</div><div class="line">+</div><div class="line">          <span class="comment">&lt;!--noindex--&gt;</span></div><div class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"post-button text-center"</span>&gt;</span></div><div class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">class</span>=<span class="string">"btn"</span> <span class="attr">href</span>=<span class="string">"&#123;&#123; url_for(post.path) &#125;&#125;&#123;% if theme.scroll_to_more %&#125;#&#123;&#123; __('post.more') &#125;&#125;&#123;% endif %&#125;"</span> <span class="attr">rel</span>=<span class="string">"contents"</span>&gt;</span></div><div class="line">              &#123;&#123; __('post.read_more') &#125;&#125; &amp;raquo;</div><div class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></div><div class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">          <span class="comment">&lt;!--/noindex--&gt;</span></div></pre></div></div></figure>
<p>为了防止有的图片宽度不够导致风格不够统一，页面不美观，需要在<span class="label default">custom.styl</span>中加入：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></div><div class="code"><pre><div class="line">// 自定义的文章摘要图片样式</div><div class="line"><span class="selector-tag">img</span><span class="selector-class">.img-topic</span> &#123;</div><div class="line">    <span class="attribute">width</span>: <span class="number">100%</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<p>最后编辑有这需求的相关文章时，在<span class="label default">Front-matter</span>（文件最上方以<span class="label default">--</span>分隔的区域）加上一行：</p>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">image: url</div></pre></div></div></figure>
<span class="label default">url</span>即图片的链接地址～<br><br>参考：<br><br>1. issue：<a href="https://github.com/iissnan/hexo-theme-next/issues/1190" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/iissnan/hexo-theme-next/issues/1190</a><br>1. 文章：<a href="http://wellliu.com/2016/12/30/【转】Blog摘要配图/" rel="external nofollow noopener noreferrer" target="_blank">http://wellliu.com/2016/12/30/【转】Blog摘要配图/</a><br><br>### 文章置顶<br><br>由于博客的首页可能是被浏览最多的页面，所以首页的前几篇文章被阅读的可能性比较大。可以利用这个特点，通过将自己认为重要的文章放在首页，从而让重要的文章被阅读的可能性增大。<br><br>但是，默认的排序只有一个维度——时间，两种选择——正序和倒序，这就造成自己的得意之作被“埋没”了，怎么办呢，如何实现文章的置顶？<br><br>NexT 主题以前有过这个功能，然而由于一些bugs（<a href="https://github.com/iissnan/hexo-theme-next/issues/415" rel="external nofollow noopener noreferrer" target="_blank">issue</a>）被去掉了。不过在这个丰富的 issue 中，我自己摸索出了一种解决方法，参考了 issue 中的<a href="http://www.netcan666.com/2015/11/22/解决Hexo置顶问题/" rel="external nofollow noopener noreferrer" target="_blank">那篇文章</a>。<br><br>首先移除默认安装的插件：<br><br><figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm uninstall hexo-generator-index --save</div></pre></div></div></figure>
<p>然后安装新插件：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-generator-index-pin-top --save</div></pre></div></div></figure>
<p>最后编辑有这需求的相关文章时，在<span class="label default">Front-matter</span>（文件最上方以<span class="label default">--</span>分隔的区域）加上一行：</p>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">top: true</div></pre></div></div></figure>
<p>然后就行了，如果你置顶了多篇，怎么控制顺序呢？设置top的值（大的在前面），比如：</p>
<figure class="highlight markdown"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line"><span class="section"># Post a.md</span></div><div class="line">title: a</div><div class="line">top: 1</div></pre></div></div></figure>
<figure class="highlight markdown"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line"><span class="section"># Post b.md</span></div><div class="line">title: b</div><div class="line">top: 10</div></pre></div></div></figure>
<p>那么文章 b 便会显示在文章 a 的前面。</p>
<div class="note primary"><p>可是，没有任何标记啊，读者怎么知道文章置顶了～</p></div>

<p>还好 NexT 原有的置顶功能有考虑到这个，且置顶的样式没有被移除，所以可以直接利用，编辑文件：</p>
<figure class="highlight js"><figcaption><span class="fileDir">文件位置：~/blog/node_modules/hexo-generator-index-pin-top/lib/</span><span class="caption">generator</span><span class="suffix">.js</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div></pre></div><div class="code"><pre><div class="line"><span class="meta">'use strict'</span>;</div><div class="line"><span class="keyword">var</span> pagination = <span class="built_in">require</span>(<span class="string">'hexo-pagination'</span>);</div><div class="line"><span class="built_in">module</span>.exports = <span class="function"><span class="keyword">function</span>(<span class="params">locals</span>)</span>&#123;</div><div class="line">  <span class="keyword">var</span> config = <span class="keyword">this</span>.config;</div><div class="line">  <span class="keyword">var</span> posts = locals.posts;</div><div class="line">    posts.data = posts.data.sort(<span class="function"><span class="keyword">function</span>(<span class="params">a, b</span>) </span>&#123;</div><div class="line">        <span class="keyword">if</span>(a.sticky &amp;&amp; b.sticky) &#123; <span class="comment">// 两篇文章sticky都有定义</span></div><div class="line">            <span class="keyword">if</span>(a.sticky == b.sticky) <span class="keyword">return</span> b.date - a.date; <span class="comment">// 若sticky值一样则按照文章日期降序排</span></div><div class="line">            <span class="keyword">else</span> <span class="keyword">return</span> b.sticky - a.sticky; <span class="comment">// 否则按照sticky值降序排</span></div><div class="line">        &#125;</div><div class="line">        <span class="keyword">else</span> <span class="keyword">if</span>(a.sticky &amp;&amp; !b.sticky) &#123; <span class="comment">// 以下是只有一篇文章sticky有定义，那么将有sticky的排在前面（这里用异或操作居然不行233）</span></div><div class="line">            <span class="keyword">return</span> <span class="number">-1</span>;</div><div class="line">        &#125;</div><div class="line">        <span class="keyword">else</span> <span class="keyword">if</span>(!a.sticky &amp;&amp; b.sticky) &#123;</div><div class="line">            <span class="keyword">return</span> <span class="number">1</span>;</div><div class="line">        &#125;</div><div class="line">        <span class="keyword">else</span> <span class="keyword">return</span> b.date - a.date; <span class="comment">// 都没定义按照文章日期降序排</span></div><div class="line">    &#125;);</div><div class="line">  <span class="keyword">var</span> paginationDir = config.pagination_dir || <span class="string">'page'</span>;</div><div class="line">  <span class="keyword">return</span> pagination(<span class="string">''</span>, posts, &#123;</div><div class="line">    perPage: config.index_generator.per_page,</div><div class="line">    layout: [<span class="string">'index'</span>, <span class="string">'archive'</span>],</div><div class="line">    format: paginationDir + <span class="string">'/%d/'</span>,</div><div class="line">    data: &#123;</div><div class="line">      __index: <span class="literal">true</span></div><div class="line">    &#125;</div><div class="line">  &#125;);</div><div class="line">&#125;;</div></pre></div></div></figure>
<p>也就是将插件的<span class="label default">top</span>全部替换为 NexT 原有的<span class="label default">sticky</span>，然后将<span class="label default">Front-matter</span>中的<span class="label default">top</span>替换为<span class="label default">sticky</span>，就能调用 NexT 主题原有的置顶样式了<i class="fa fa-thumb-tack fa-lg"></i>。</p>
<p>最后可以自定义一下样式：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></div><div class="code"><pre><div class="line">// 自定义的文章置顶样式</div><div class="line"><span class="selector-class">.post-sticky-flag</span> &#123;</div><div class="line">    <span class="attribute">font-size</span>: inherit;</div><div class="line">    <span class="attribute">float</span>: left;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(0, 0, 0);</div><div class="line">    <span class="attribute">cursor</span>: help;</div><div class="line">    <span class="attribute">transition-duration</span>: <span class="number">0.2s</span>;</div><div class="line">    <span class="attribute">transition-timing-function</span>: ease-in-out;</div><div class="line">    <span class="attribute">transition-delay</span>: <span class="number">0s</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-sticky-flag</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#07b39b</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<div class="note warning"><p>已发现的 bug：新安装的插件无法实现站点配置文件中<span class="label default">order_by: date</span>，即文章按时间从旧到新排列的配置，也就意味着文章只能按默认的时间从新到旧排列。</p></div>

<h3 id="背景图片"><a href="#背景图片" class="headerlink" title="背景图片"></a>背景图片</h3><p>通过 jquery-backstretch，具体操作呢，编辑文件：</p>
<figure class="highlight plain"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/</span><span class="caption">_layout</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line diff-addition">  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;;</div><div class="line diff-addition">  &lt;script&gt;</div><div class="line diff-addition">  $(&quot;body&quot;).backstretch(&quot;https://背景图.jpg&quot;);</div><div class="line diff-addition">  &lt;/script&gt;</div><div class="line">&lt;/body&gt;</div></pre></div></div></figure>
<p>加入到文件最后面<code>&lt;/body&gt;</code>前面即可。</p>
<p>你可以浏览器按 F12 查看我的页面，就可以在<code>&lt;/body&gt;</code>前发现。</p>
<p>幻灯片等更多用法请自行查看 GitHub 上的 <a href="https://github.com/jquery-backstretch/jquery-backstretch" rel="external nofollow noopener noreferrer" target="_blank">README</a>。</p>
<h3 id="动态效果"><a href="#动态效果" class="headerlink" title="动态效果"></a>动态效果</h3><p>可以在主题配置文件<code>_config.yml</code>里的<code>motion</code>中配置，但是如果你和我一样更改了博客的背景色，可能不能达到很好的效果，怎么办呢？参考<a href="https://github.com/iissnan/hexo-theme-next/pull/1829/files" rel="external nofollow noopener noreferrer" target="_blank">这里</a>，修改下面两个文件的相应内容。</p>
<ol>
<li>~/blog/themes/next/source/css/_common/components/post/post.styl</li>
<li>~/blog/themes/next/source/js/src/motion.js</li>
</ol>
<h3 id="相关-热门-推荐文章"><a href="#相关-热门-推荐文章" class="headerlink" title="相关/热门/推荐文章"></a>相关/热门/推荐文章</h3><p><a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/09/related-popular-recommended-posts.html" rel="external nofollow noopener noreferrer" target="_blank">https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/09/related-popular-recommended-posts.html</a></p>
<h3 id="MathJax-的静态显示（svg）"><a href="#MathJax-的静态显示（svg）" class="headerlink" title="MathJax 的静态显示（svg）"></a>MathJax 的静态显示（svg）</h3><p><a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/16/hexo-mathjax-svg.html" rel="external nofollow noopener noreferrer" target="_blank">https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/16/hexo-mathjax-svg.html</a></p>
<h3 id="加速-Hexo-博客"><a href="#加速-Hexo-博客" class="headerlink" title="加速 Hexo 博客"></a>加速 Hexo 博客</h3><p><a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html" rel="external nofollow noopener noreferrer" target="_blank">https://reuixiy.github.io/technology/computer/computer-aided-art/2018/05/30/speed-up-hexo.html</a></p>
<h3 id="萌萌哒十二生肖"><a href="#萌萌哒十二生肖" class="headerlink" title="萌萌哒十二生肖"></a>萌萌哒十二生肖</h3><p><a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2018/08/27/add-chinese-zodiac-to-next.html" rel="external nofollow noopener noreferrer" target="_blank">https://reuixiy.github.io/technology/computer/computer-aided-art/2018/08/27/add-chinese-zodiac-to-next.html</a></p>
<h3 id="使用-gitalk-评论系统"><a href="#使用-gitalk-评论系统" class="headerlink" title="使用 gitalk 评论系统"></a>使用 gitalk 评论系统</h3><blockquote class="question"><a href="https://github.com/gitalk/gitalk" rel="external nofollow noopener noreferrer" target="_blank">Gitalk</a> 是一个基于 GitHub Issue 和 Preact 开发的评论插件。</blockquote>

<h4 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h4><ul>
<li>使用 GitHub 登录</li>
<li>支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]</li>
<li>支持个人或组织</li>
<li>无干扰模式（设置 distractionFreeMode 为 true 开启）</li>
<li>快捷键提交评论 （cmd|ctrl + enter）</li>
<li><a href="https://github.com/gitalk/gitalk/blob/master/readme-cn.md" rel="external nofollow noopener noreferrer" target="_blank">README</a></li>
</ul>
<h4 id="创建github-application"><a href="#创建github-application" class="headerlink" title="创建github-application"></a>创建github-application</h4><p>请参照<a href="https://knightcai.github.io/2017/12/19/为博客添加-Gitalk-评论插件/#创建-github-application" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>相关章节。</p>
<h4 id="安装-1"><a href="#安装-1" class="headerlink" title="安装"></a>安装</h4><p>在<span class="label success">主题</span>配置文件<code>_config.yml</code>中增加以下：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Gitalk</span></div><div class="line"><span class="comment"># more info please open https://github.com/gitalk/gitalk</span></div><div class="line"><span class="attr">gitalk:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  clientID:</span> <span class="number">54</span><span class="string">f26977793794b45255</span></div><div class="line"><span class="attr">  clientSecret:</span> <span class="number">568</span><span class="string">cccb3bdde42eca6c05ab0680b4617bbb58c4f</span></div><div class="line"><span class="attr">  repo:</span> <span class="string">yszar.github.io</span></div><div class="line"><span class="attr">  owner:</span> <span class="string">yszar</span></div><div class="line"><span class="attr">  admin:</span> <span class="string">yszar</span> <span class="comment"># support multiple admins split with comma, e.g. foo,bar</span></div><div class="line"><span class="attr">  id:</span> <span class="string">md5(location.pathname)</span></div><div class="line"><span class="attr">  pagerDirection:</span> <span class="string">first</span></div><div class="line"><span class="attr">  createIssueManually:</span> <span class="literal">false</span></div></pre></div></div></figure>
<div class="note info"><p>参数如何填写请参照官方README</p></div>

<p>在<code>~/blog/themes/next/layout/_partials/comments.swig</code>文件中修改：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置~/blog/themes/next/layout/_partials/</span><span class="caption">comments</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></div><div class="code"><pre><div class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"SOHUCS"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line">     &#123;% elseif theme.valine.appid and theme.valine.appkey %&#125;</div><div class="line">       <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"vcomments"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line diff-addition">     &#123;% elseif theme.gitalk.enable %&#125;</div><div class="line diff-addition">       <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"gitalk-container"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line diff-addition">       <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://unpkg.com/gitalk/dist/gitalk.css"</span>&gt;</span></div><div class="line">     &#123;% endif %&#125;</div><div class="line">   <span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"> &#123;% endif %&#125;</div></pre></div></div></figure>
<p>在<code>~/blog/themes/next/layout/_third-party/comments/</code>位置创建文件<code>gitalk.swig</code></p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></div><div class="code"><pre><div class="line">&#123;% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname %&#125;</div><div class="line">   &#123;% if theme.gitalk.enable %&#125;</div><div class="line">     &#123;% if page.comments %&#125;</div><div class="line">       <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/gitalk/dist/gitalk.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">       <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">         <span class="keyword">const</span> gitalk = <span class="keyword">new</span> Gitalk(&#123;</span></div><div class="line"><span class="javascript">           clientID: <span class="string">'&#123;&#123;theme.gitalk.clientID&#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">           clientSecret: <span class="string">'&#123;&#123;theme.gitalk.clientSecret&#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">           repo: <span class="string">'&#123;&#123;theme.gitalk.repo&#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">           owner: <span class="string">'&#123;&#123;theme.gitalk.owner&#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">           admin: <span class="string">'&#123;&#123;theme.gitalk.admin&#125;&#125;'</span>.split(<span class="string">','</span>),</span></div><div class="line"><span class="javascript">           pagerDirection: <span class="string">'&#123;&#123;theme.gitalk.pagerDirection&#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">           <span class="comment">// facebook-like distraction free mode</span></span></div><div class="line"><span class="javascript">           distractionFreeMode: <span class="literal">false</span></span></div><div class="line"><span class="undefined">         &#125;)</span></div><div class="line"><span class="javascript">         gitalk.render(<span class="string">'gitalk-container'</span>)</span></div><div class="line"><span class="undefined">       </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">     &#123;% endif %&#125;</div><div class="line">   &#123;% endif %&#125;</div><div class="line"> &#123;% endif %&#125;</div></pre></div></div></figure>
<p>在<code>~/blog/themes/next/layout/_third-party/comments/index.swig</code>中修改：</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/layout/_third-party/comments/</span><span class="caption">index</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></div><div class="code"><pre><div class="line">  &#123;% include 'livere.swig' %&#125;</div><div class="line">  &#123;% include 'changyan.swig' %&#125;</div><div class="line">  &#123;% include 'valine.swig' %&#125;</div><div class="line diff-addition"> &#123;% include 'gitalk.swig' %&#125;</div></pre></div></div></figure>
<h4 id="修复-Error-Validation-Failed"><a href="#修复-Error-Validation-Failed" class="headerlink" title="修复 Error: Validation Failed"></a>修复 Error: Validation Failed</h4><div class="note warning"><p>评论区上方如果出现<code>Error: Validation Failed</code></p></div>

<p>创建md5.min.js文件</p>
<figure class="highlight js"><figcaption><span class="fileDir">文件位置：~themes\next\source\js\src\</span><span class="caption">md5.min</span><span class="suffix">.js</span><a href="https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js/" target="_blank" rel="external nofollow noopener noreferrer">代码来自Github</a></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div></pre></div><div class="code"><pre><div class="line">! <span class="function"><span class="keyword">function</span>(<span class="params">n</span>) </span>&#123;</div><div class="line"><span class="meta">    "use strict"</span>;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">t</span>(<span class="params">n, t</span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> r = (<span class="number">65535</span> &amp; n) + (<span class="number">65535</span> &amp; t);</div><div class="line">        <span class="keyword">return</span> (n &gt;&gt; <span class="number">16</span>) + (t &gt;&gt; <span class="number">16</span>) + (r &gt;&gt; <span class="number">16</span>) &lt;&lt; <span class="number">16</span> | <span class="number">65535</span> &amp; r</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">r</span>(<span class="params">n, t</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> n &lt;&lt; t | n &gt;&gt;&gt; <span class="number">32</span> - t</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">e</span>(<span class="params">n, e, o, u, c, f</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> t(r(t(t(e, n), t(u, f)), c), o)</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">o</span>(<span class="params">n, t, r, o, u, c, f</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> e(t &amp; r | ~t &amp; o, n, t, u, c, f)</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">u</span>(<span class="params">n, t, r, o, u, c, f</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> e(t &amp; o | r &amp; ~o, n, t, u, c, f)</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">c</span>(<span class="params">n, t, r, o, u, c, f</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> e(t ^ r ^ o, n, t, u, c, f)</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">n, t, r, o, u, c, f</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> e(r ^ (t | ~o), n, t, u, c, f)</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">i</span>(<span class="params">n, r</span>) </span>&#123;</div><div class="line">        n[r &gt;&gt; <span class="number">5</span>] |= <span class="number">128</span> &lt;&lt; r % <span class="number">32</span>, n[<span class="number">14</span> + (r + <span class="number">64</span> &gt;&gt;&gt; <span class="number">9</span> &lt;&lt; <span class="number">4</span>)] = r;</div><div class="line">        <span class="keyword">var</span> e, i, a, d, h, l = <span class="number">1732584193</span>,</div><div class="line">            g = <span class="number">-271733879</span>,</div><div class="line">            v = <span class="number">-1732584194</span>,</div><div class="line">            m = <span class="number">271733878</span>;</div><div class="line">        <span class="keyword">for</span> (e = <span class="number">0</span>; e &lt; n.length; e += <span class="number">16</span>) i = l, a = g, d = v, h = m, g = f(g = f(g = f(g = f(g = c(g = c(g = c(g = c(g = u(g = u(g = u(g = u(g = o(g = o(g = o(g = o(g, v = o(v, m = o(m, l = o(l, g, v, m, n[e], <span class="number">7</span>, <span class="number">-680876936</span>), g, v, n[e + <span class="number">1</span>], <span class="number">12</span>, <span class="number">-389564586</span>), l, g, n[e + <span class="number">2</span>], <span class="number">17</span>, <span class="number">606105819</span>), m, l, n[e + <span class="number">3</span>], <span class="number">22</span>, <span class="number">-1044525330</span>), v = o(v, m = o(m, l = o(l, g, v, m, n[e + <span class="number">4</span>], <span class="number">7</span>, <span class="number">-176418897</span>), g, v, n[e + <span class="number">5</span>], <span class="number">12</span>, <span class="number">1200080426</span>), l, g, n[e + <span class="number">6</span>], <span class="number">17</span>, <span class="number">-1473231341</span>), m, l, n[e + <span class="number">7</span>], <span class="number">22</span>, <span class="number">-45705983</span>), v = o(v, m = o(m, l = o(l, g, v, m, n[e + <span class="number">8</span>], <span class="number">7</span>, <span class="number">1770035416</span>), g, v, n[e + <span class="number">9</span>], <span class="number">12</span>, <span class="number">-1958414417</span>), l, g, n[e + <span class="number">10</span>], <span class="number">17</span>, <span class="number">-42063</span>), m, l, n[e + <span class="number">11</span>], <span class="number">22</span>, <span class="number">-1990404162</span>), v = o(v, m = o(m, l = o(l, g, v, m, n[e + <span class="number">12</span>], <span class="number">7</span>, <span class="number">1804603682</span>), g, v, n[e + <span class="number">13</span>], <span class="number">12</span>, <span class="number">-40341101</span>), l, g, n[e + <span class="number">14</span>], <span class="number">17</span>, <span class="number">-1502002290</span>), m, l, n[e + <span class="number">15</span>], <span class="number">22</span>, <span class="number">1236535329</span>), v = u(v, m = u(m, l = u(l, g, v, m, n[e + <span class="number">1</span>], <span class="number">5</span>, <span class="number">-165796510</span>), g, v, n[e + <span class="number">6</span>], <span class="number">9</span>, <span class="number">-1069501632</span>), l, g, n[e + <span class="number">11</span>], <span class="number">14</span>, <span class="number">643717713</span>), m, l, n[e], <span class="number">20</span>, <span class="number">-373897302</span>), v = u(v, m = u(m, l = u(l, g, v, m, n[e + <span class="number">5</span>], <span class="number">5</span>, <span class="number">-701558691</span>), g, v, n[e + <span class="number">10</span>], <span class="number">9</span>, <span class="number">38016083</span>), l, g, n[e + <span class="number">15</span>], <span class="number">14</span>, <span class="number">-660478335</span>), m, l, n[e + <span class="number">4</span>], <span class="number">20</span>, <span class="number">-405537848</span>), v = u(v, m = u(m, l = u(l, g, v, m, n[e + <span class="number">9</span>], <span class="number">5</span>, <span class="number">568446438</span>), g, v, n[e + <span class="number">14</span>], <span class="number">9</span>, <span class="number">-1019803690</span>), l, g, n[e + <span class="number">3</span>], <span class="number">14</span>, <span class="number">-187363961</span>), m, l, n[e + <span class="number">8</span>], <span class="number">20</span>, <span class="number">1163531501</span>), v = u(v, m = u(m, l = u(l, g, v, m, n[e + <span class="number">13</span>], <span class="number">5</span>, <span class="number">-1444681467</span>), g, v, n[e + <span class="number">2</span>], <span class="number">9</span>, <span class="number">-51403784</span>), l, g, n[e + <span class="number">7</span>], <span class="number">14</span>, <span class="number">1735328473</span>), m, l, n[e + <span class="number">12</span>], <span class="number">20</span>, <span class="number">-1926607734</span>), v = c(v, m = c(m, l = c(l, g, v, m, n[e + <span class="number">5</span>], <span class="number">4</span>, <span class="number">-378558</span>), g, v, n[e + <span class="number">8</span>], <span class="number">11</span>, <span class="number">-2022574463</span>), l, g, n[e + <span class="number">11</span>], <span class="number">16</span>, <span class="number">1839030562</span>), m, l, n[e + <span class="number">14</span>], <span class="number">23</span>, <span class="number">-35309556</span>), v = c(v, m = c(m, l = c(l, g, v, m, n[e + <span class="number">1</span>], <span class="number">4</span>, <span class="number">-1530992060</span>), g, v, n[e + <span class="number">4</span>], <span class="number">11</span>, <span class="number">1272893353</span>), l, g, n[e + <span class="number">7</span>], <span class="number">16</span>, <span class="number">-155497632</span>), m, l, n[e + <span class="number">10</span>], <span class="number">23</span>, <span class="number">-1094730640</span>), v = c(v, m = c(m, l = c(l, g, v, m, n[e + <span class="number">13</span>], <span class="number">4</span>, <span class="number">681279174</span>), g, v, n[e], <span class="number">11</span>, <span class="number">-358537222</span>), l, g, n[e + <span class="number">3</span>], <span class="number">16</span>, <span class="number">-722521979</span>), m, l, n[e + <span class="number">6</span>], <span class="number">23</span>, <span class="number">76029189</span>), v = c(v, m = c(m, l = c(l, g, v, m, n[e + <span class="number">9</span>], <span class="number">4</span>, <span class="number">-640364487</span>), g, v, n[e + <span class="number">12</span>], <span class="number">11</span>, <span class="number">-421815835</span>), l, g, n[e + <span class="number">15</span>], <span class="number">16</span>, <span class="number">530742520</span>), m, l, n[e + <span class="number">2</span>], <span class="number">23</span>, <span class="number">-995338651</span>), v = f(v, m = f(m, l = f(l, g, v, m, n[e], <span class="number">6</span>, <span class="number">-198630844</span>), g, v, n[e + <span class="number">7</span>], <span class="number">10</span>, <span class="number">1126891415</span>), l, g, n[e + <span class="number">14</span>], <span class="number">15</span>, <span class="number">-1416354905</span>), m, l, n[e + <span class="number">5</span>], <span class="number">21</span>, <span class="number">-57434055</span>), v = f(v, m = f(m, l = f(l, g, v, m, n[e + <span class="number">12</span>], <span class="number">6</span>, <span class="number">1700485571</span>), g, v, n[e + <span class="number">3</span>], <span class="number">10</span>, <span class="number">-1894986606</span>), l, g, n[e + <span class="number">10</span>], <span class="number">15</span>, <span class="number">-1051523</span>), m, l, n[e + <span class="number">1</span>], <span class="number">21</span>, <span class="number">-2054922799</span>), v = f(v, m = f(m, l = f(l, g, v, m, n[e + <span class="number">8</span>], <span class="number">6</span>, <span class="number">1873313359</span>), g, v, n[e + <span class="number">15</span>], <span class="number">10</span>, <span class="number">-30611744</span>), l, g, n[e + <span class="number">6</span>], <span class="number">15</span>, <span class="number">-1560198380</span>), m, l, n[e + <span class="number">13</span>], <span class="number">21</span>, <span class="number">1309151649</span>), v = f(v, m = f(m, l = f(l, g, v, m, n[e + <span class="number">4</span>], <span class="number">6</span>, <span class="number">-145523070</span>), g, v, n[e + <span class="number">11</span>], <span class="number">10</span>, <span class="number">-1120210379</span>), l, g, n[e + <span class="number">2</span>], <span class="number">15</span>, <span class="number">718787259</span>), m, l, n[e + <span class="number">9</span>], <span class="number">21</span>, <span class="number">-343485551</span>), l = t(l, i), g = t(g, a), v = t(v, d), m = t(m, h);</div><div class="line">        <span class="keyword">return</span> [l, g, v, m]</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> t, r = <span class="string">""</span>,</div><div class="line">            e = <span class="number">32</span> * n.length;</div><div class="line">        <span class="keyword">for</span> (t = <span class="number">0</span>; t &lt; e; t += <span class="number">8</span>) r += <span class="built_in">String</span>.fromCharCode(n[t &gt;&gt; <span class="number">5</span>] &gt;&gt;&gt; t % <span class="number">32</span> &amp; <span class="number">255</span>);</div><div class="line">        <span class="keyword">return</span> r</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">d</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> t, r = [];</div><div class="line">        <span class="keyword">for</span> (r[(n.length &gt;&gt; <span class="number">2</span>) - <span class="number">1</span>] = <span class="keyword">void</span> <span class="number">0</span>, t = <span class="number">0</span>; t &lt; r.length; t += <span class="number">1</span>) r[t] = <span class="number">0</span>;</div><div class="line">        <span class="keyword">var</span> e = <span class="number">8</span> * n.length;</div><div class="line">        <span class="keyword">for</span> (t = <span class="number">0</span>; t &lt; e; t += <span class="number">8</span>) r[t &gt;&gt; <span class="number">5</span>] |= (<span class="number">255</span> &amp; n.charCodeAt(t / <span class="number">8</span>)) &lt;&lt; t % <span class="number">32</span>;</div><div class="line">        <span class="keyword">return</span> r</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">h</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> a(i(d(n), <span class="number">8</span> * n.length))</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">l</span>(<span class="params">n, t</span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> r, e, o = d(n),</div><div class="line">            u = [],</div><div class="line">            c = [];</div><div class="line">        <span class="keyword">for</span> (u[<span class="number">15</span>] = c[<span class="number">15</span>] = <span class="keyword">void</span> <span class="number">0</span>, o.length &gt; <span class="number">16</span> &amp;&amp; (o = i(o, <span class="number">8</span> * n.length)), r = <span class="number">0</span>; r &lt; <span class="number">16</span>; r += <span class="number">1</span>) u[r] = <span class="number">909522486</span> ^ o[r], c[r] = <span class="number">1549556828</span> ^ o[r];</div><div class="line">        <span class="keyword">return</span> e = i(u.concat(d(t)), <span class="number">512</span> + <span class="number">8</span> * t.length), a(i(c.concat(e), <span class="number">640</span>))</div><div class="line">    &#125;</div><div class="line"></div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">g</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">var</span> t, r, e = <span class="string">""</span>;</div><div class="line">        <span class="keyword">for</span> (r = <span class="number">0</span>; r &lt; n.length; r += <span class="number">1</span>) t = n.charCodeAt(r), e += <span class="string">"0123456789abcdef"</span>.charAt(t &gt;&gt;&gt; <span class="number">4</span> &amp; <span class="number">15</span>) + <span class="string">"0123456789abcdef"</span>.charAt(<span class="number">15</span> &amp; t);</div><div class="line">        <span class="keyword">return</span> e</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">v</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> <span class="built_in">unescape</span>(<span class="built_in">encodeURIComponent</span>(n))</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">m</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> h(v(n))</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">p</span>(<span class="params">n</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> g(m(n))</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">s</span>(<span class="params">n, t</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> l(v(n), v(t))</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">C</span>(<span class="params">n, t</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> g(s(n, t))</div><div class="line">    &#125;</div><div class="line">    <span class="function"><span class="keyword">function</span> <span class="title">A</span>(<span class="params">n, t, r</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> t ? r ? s(t, n) : C(t, n) : r ? m(n) : p(n)</div><div class="line">    &#125;</div><div class="line">    <span class="string">"function"</span> == <span class="keyword">typeof</span> define &amp;&amp; define.amd ? define(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> A</div><div class="line">    &#125;) : <span class="string">"object"</span> == <span class="keyword">typeof</span> <span class="built_in">module</span> &amp;&amp; <span class="built_in">module</span>.exports ? <span class="built_in">module</span>.exports = A : n.md5 = A</div><div class="line">&#125;(<span class="keyword">this</span>);</div><div class="line"><span class="comment">//# sourceMappingURL=md5.min.js.map</span></div></pre></div></div></figure>
<p>修改gitalk.swig文件</p>
<figure class="highlight html"><figcaption><span class="fileDir">文件位置 themes\next\layout\_third-party\comments\</span><span class="caption">gitalk</span><span class="suffix">.swig</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></div><div class="code"><pre><div class="line">&#123;% if page.comments &amp;&amp; theme.gitalk.enable %&#125;</div><div class="line">  <span class="tag">&lt;<span class="name">link</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span> <span class="attr">href</span>=<span class="string">"https://unpkg.com/gitalk/dist/gitalk.css"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://unpkg.com/gitalk/dist/gitalk.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line">+ <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/js/src/md5.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="undefined"></span></div><div class="line"><span class="javascript">    <span class="keyword">var</span> gitalk = <span class="keyword">new</span> Gitalk(&#123;</span></div><div class="line"><span class="javascript">      clientID: <span class="string">'&#123;&#123; theme.gitalk.ClientID &#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">      clientSecret: <span class="string">'&#123;&#123; theme.gitalk.ClientSecret &#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">      repo: <span class="string">'&#123;&#123; theme.gitalk.repo &#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">      owner: <span class="string">'&#123;&#123; theme.gitalk.githubID &#125;&#125;'</span>,</span></div><div class="line"><span class="javascript">      admin: [<span class="string">'&#123;&#123; theme.gitalk.adminUser &#125;&#125;'</span>],</span></div><div class="line"><span class="undefined">-     id: location.pathname,</span></div><div class="line"><span class="undefined">+     id: md5(location.pathname),</span></div><div class="line"><span class="javascript">      distractionFreeMode: <span class="string">'&#123;&#123; theme.gitalk.distractionFreeMode &#125;&#125;'</span></span></div><div class="line"><span class="undefined">    &#125;)</span></div><div class="line"><span class="javascript">    gitalk.render(<span class="string">'gitalk-container'</span>)</span></div><div class="line"><span class="undefined">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line">&#123;% endif %&#125;</div></pre></div></div></figure>
<p>主题配置文件<code>_config.yml</code>中加入：</p>
<figure class="highlight yml"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></div><div class="code"><pre><div class="line"><span class="attr">gitalk:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  clientID:</span> <span class="number">54</span><span class="string">f26977793794b45255</span></div><div class="line"><span class="attr">  clientSecret:</span> <span class="number">568</span><span class="string">cccb3bdde42eca6c05ab0680b4617bbb58c4f</span></div><div class="line"><span class="attr">  repo:</span> <span class="string">yszar.github.io</span></div><div class="line"><span class="attr">  owner:</span> <span class="string">yszar</span></div><div class="line"><span class="attr">  admin:</span> <span class="string">yszar</span> <span class="comment"># support multiple admins split with comma, e.g. foo,bar</span></div><div class="line"><span class="string">+</span> <span class="attr">id:</span> <span class="string">md5(location.pathname)</span></div><div class="line"><span class="attr">  pagerDirection:</span> <span class="string">first</span></div><div class="line"><span class="attr">  createIssueManually:</span> <span class="literal">false</span></div></pre></div></div></figure>
<h2 id="进阶-写出优雅文章"><a href="#进阶-写出优雅文章" class="headerlink" title="进阶 写出优雅文章"></a>进阶 写出优雅文章</h2><p>博客搭好了，只能说有个漂亮的外壳，内容丰富且颜值高的文章才是真正的精华。文章内容只能靠自己，不过这里教你几招提高文章颜值的方法。</p>
<p>写文章前请先查看 Hexo 官方文档之写作，写的很棒！然后再来细细讲讲文章（post）的模版文件，因为文章模版文件的个性化会直接影响文章（post）的主要布局，甚至是页面（page）的主要布局。</p>
<p>文章的模版文件（必读）</p>
<p>如果你是在站点文件夹根目录用<code>hexo new post &lt;title&gt;</code>新建的文章，那么其实它就是将文章的模版文件<code>post.md</code>“复制”了一份到<code>~/blog/source/_posts/</code>下，所以这也意味着：</p>
<ol>
<li>你可以直接通过在<code>~/blog/source/_posts/</code>下新建<code>.md</code>结尾的文件来写新的文章。</li>
<li>你可以通过自定义文章的模版文件，从而每次命令行新建的文章都会有你自定义的内容。</li>
</ol>
<div class="note warning"><p>注意：如果自己直接新建文件，一定要记得加上文件最上方的参数，即下面的相关内容，还有编码请用 UTF-8。</p></div>

<p>关于文件最上方的参数，参见 Hexo 官方文档的 <a href="https://hexo.io/docs/front-matter.html" rel="external nofollow noopener noreferrer" target="_blank">Front-matter</a> 和<a href="https://hexo.io/zh-cn/docs/variables.html#页面变量" rel="external nofollow noopener noreferrer" target="_blank">页面变量</a>，下面是我的总结：</p>
<figure class="highlight markdown"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div></pre></div><div class="code"><pre><div class="line">/* ！！！！！！！！！！</div><div class="line">** 每一项的 : 后面均有一个空格</div><div class="line">** 且 : 为英文符号</div><div class="line">** ！！！！！！！！！！</div><div class="line">*/</div><div class="line"></div><div class="line">title:</div><div class="line">/<span class="bullet">* 文章标题，可以为中文 *</span>/</div><div class="line"></div><div class="line">date:</div><div class="line">/* 建立日期，如果自己手动添加，请按固定格式</div><div class="line">** 就算不写，页面每篇文章顶部的发表于……也能显示</div><div class="line">** 只要在主题配置文件中，配置了 created_at 就行</div><div class="line">** 那为什么还要自己加上？</div><div class="line">** 自定义文章发布的时间</div><div class="line">*/</div><div class="line"></div><div class="line">updated:</div><div class="line">/* 更新日期，其它与上面的建立日期类似</div><div class="line">** 不过在页面每篇文章顶部，是更新于……</div><div class="line">** 在主题配置文件中，是 updated_at</div><div class="line">*/</div><div class="line"></div><div class="line">permalink:</div><div class="line">/* 若站点配置文件下的 permalink 配置了 title</div><div class="line">** 则可以替换文章 URL 里面的 title（文章标题）</div><div class="line">*/</div><div class="line"></div><div class="line">categories:</div><div class="line">/* 分类，支持多级，比如：</div><div class="line"><span class="bullet">- </span>technology</div><div class="line"><span class="bullet">- </span>computer</div><div class="line"><span class="bullet">- </span>computer-aided-art</div><div class="line">则为technology/computer/computer-aided-art</div><div class="line">（不适用于 layout: page）</div><div class="line">*/</div><div class="line"></div><div class="line">tags:</div><div class="line">/* 标签</div><div class="line">** 多个可以这样写[标签1,标签2,标签3]</div><div class="line">** （不适用于 layout: page）</div><div class="line">*/</div><div class="line"></div><div class="line">description:</div><div class="line">/* 文章的描述，在每篇文章标题下方显示</div><div class="line">** 并且作为网页的 description 元数据</div><div class="line">** 如果不写，则自动取 <span class="xml"><span class="comment">&lt;!-- more --&gt;</span></span></div><div class="line">** 之前的文字作为网页的 description 元数据</div><div class="line">** 建议每篇文章都务必加上！</div><div class="line">*/</div><div class="line"></div><div class="line">keywords:</div><div class="line">/* 关键字，并且作为网页的 keywords 元数据</div><div class="line">** 如果不写，则自动取 tags 里的项</div><div class="line">** 作为网页的 keywords 元数据</div><div class="line">*/</div><div class="line"></div><div class="line">comments:</div><div class="line">/* 是否开启评论</div><div class="line">** 默认值是 true</div><div class="line">** 要关闭写 false</div><div class="line">*/</div><div class="line"></div><div class="line">layout:</div><div class="line">/* 页面布局，默认值是 post，默认值可以在</div><div class="line">** 站点配置文件中修改 default_layout</div><div class="line">** 另：404 页面可能用到，将其值改为 false</div><div class="line">*/</div><div class="line"></div><div class="line">type:</div><div class="line">/* categories，目录页面</div><div class="line">** tags，标签页面</div><div class="line">** picture，用来生成 group-pictures</div><div class="line">** quote？</div><div class="line">** https://reuixiy.github.io/uncategorized/2010/01/01/test.html</div><div class="line">*/</div><div class="line"></div><div class="line">photos:</div><div class="line">/* Gallery support，用来支持画廊 / 相册，用法如下：</div><div class="line"><span class="bullet">- </span>photo<span class="emphasis">_url_</span>1</div><div class="line"><span class="bullet">- </span>photo<span class="emphasis">_url_</span>2</div><div class="line"><span class="bullet">- </span>photo<span class="emphasis">_url_</span>3</div><div class="line">https://reuixiy.github.io/uncategorized/2010/01/01/test.html</div><div class="line">*/</div><div class="line"></div><div class="line">link:</div><div class="line">/* 文章的外部链接</div><div class="line">** https://reuixiy.github.io/uncategorized/2010/01/01/test.html</div><div class="line">*/</div><div class="line"></div><div class="line">image:</div><div class="line">/* 自定义的文章摘要图片，只在页面展示，文章内消失</div><div class="line">** 此项只有参考本文 5.14 节配置好，否则请勿添加！</div><div class="line">*/</div><div class="line"></div><div class="line">sticky:</div><div class="line">/* 文章置顶</div><div class="line">** 此项只有参考本文 5.15 节配置好，否则请勿添加！</div><div class="line">*/</div><div class="line"></div><div class="line">password:</div><div class="line">/* 文章密码，此项只有参考教程：</div><div class="line">** http://shenzekun.cn/hexo的next主题个性化配置教程.html</div><div class="line">** 第 24 节，配置好，否则请勿添加！</div><div class="line">** 发现还是有 bug 的，就是右键在新标签中打开</div><div class="line">** 然后无论是否输入密码，都能看到内容</div><div class="line">*/</div></pre></div></div></figure>
<div class="note info no-icon"><p>tip：灵活利用 permalink，如果你是一个和我一样希望文章 URL 中不会出现中文的人。</p></div>

<div class="note primary"><p><b>为什么一定要添加文章的描述（description）呢？</b><br>回答之前，先反问一句：为什么你的文章一定要加标题？<br><br>吸引读者，为了让读者快速了解文章内容。<br><br>对了，这就是答案。但由于文章的标题非常短，很多时候读者看完标题后，仍然对文章内容不了解，这时就要用到文章的描述。<br><br>什么？你只是写给自己看的？！那请你也务必添加文章的描述，因为你自己也是读者啊，这对自己以后回顾文章很有作用！</p></div>

<p>基于你自己博客的功能需求，以及自己对页面布局和文章布局的理解（审美观），将上面这些自己需要的加到自己的文章模版文件中即可，最后贴出我的文章模版文件：</p>
<figure class="highlight markdown"><figcaption><span class="fileDir">文件位置：~/blog/scaffolds/</span><span class="caption">post</span><span class="suffix">.md</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></div><div class="code"><pre><div class="line">---</div><div class="line">title: &#123;&#123; title &#125;&#125;</div><div class="line">date: &#123;&#123; date &#125;&#125;</div><div class="line">permalink:</div><div class="line">categories:</div><div class="line">tags: []</div><div class="line">description:</div><div class="line">image:</div><div class="line">---</div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">p</span> <span class="attr">class</span>=<span class="string">"description"</span>&gt;</span></span><span class="xml"><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span></div><div class="line"></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://"</span> <span class="attr">alt</span>=<span class="string">""</span> <span class="attr">style</span>=<span class="string">"width:100%"</span> /&gt;</span></span></div><div class="line"></div><div class="line"><span class="xml"><span class="comment">&lt;!-- more --&gt;</span></span></div><div class="line"></div><div class="line"><span class="section">##</span></div><div class="line"></div><div class="line"><span class="section">##</span></div><div class="line"></div><div class="line"><span class="section">##</span></div><div class="line"></div><div class="line"><span class="xml"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></div></pre></div></div></figure>
<p>但为什么说文章模版文件的个性化会直接影响文章（post）的主要布局，甚至是页面（page）的主要布局呢？哈哈哈，让我来解释一番我的文章模版文件，你就知道了～</p>
<ul>
<li><strong>Front-matter</strong></li>
</ul>
<p>先起好文章的<code>title</code>（中文），然后补上<code>permalink</code>（英文），这是因为我在站点配置文件将 <code>title</code> 加进了文章的 <code>URL</code> 中，然而我不希望文章的 <code>URL</code> 中出现中文，相当于将 <code>URL</code> 中的中文翻译成英文。</p>
<p><code>date</code>可以方便自定义文章的发布时间，接下来是两种不同的分类方式——<code>categories和tags</code>（分类和标签），<code>description</code>是文章的描述，建议务必写上！原因上面说了～</p>
<p><code>image</code>的话，暂时保密～</p>
<ul>
<li><strong><code>&lt;p&gt;</code></strong></li>
</ul>
<p>由于文章的描述（<code>description</code>）有时候并不能满足我的需求（比如加个 emoji……），所以有时候我需要将“文章的描述”写在文章中，并放在<code>&lt;!-- more --&gt;</code>之前作为文章摘要，但为了保证在文章（ post ）中与正文区分开来，我自己在<code>custom.styl</code>中自定义了一个<code>&lt;p&gt;</code>标签的样式（参考本文 <a href="#附上我的 custom.styl">4.2</a> 节的相关代码），用来模仿 <code>description</code> 的显示效果。</p>
<p>而且，由于如果不写<code>description</code>，则自动取<code>&lt;!-- more --&gt;</code>之前的文字作为网页的 <code>description</code> 元数据，外观和功能兼得，完美替代啊，美滋滋～</p>
<p>（可能要更改相关样式才能达到比较好的效果，参考本文<a href="#优化 网页样式布局">第 4 节</a>）</p>
<ul>
<li><strong>图片</strong></li>
</ul>
<p>由于<code>&lt;!-- more --&gt;</code>之前的文章内容会作为文章摘要（<code>excerpt</code>）显示在页面（<code>page</code>）中，会影响页面的主要布局，所以我在它前面加上了图片，为显示在页面的每篇文章的文章摘要配一张图片，保证博客页面的美观。有的图片宽度不够导致风格不够统一，页面不美观咋办？加上<code>width:100%</code>。</p>
<p>但是，有些情况下，也许你会从文章中选一张图片作为文章摘要图片，而这张图片由于写作要求，必须添加在文章的末尾，这样点 <code>[Read More]</code> 查看文章时，这张图片就会重复出现了，那怎么办？用文章摘要图片 <code>image</code>～</p>
<ul>
<li><strong><code>&lt;!-- more --&gt;</code></strong></li>
</ul>
<p>之后的是文章的主要内容，文章的主要内容一般都可以分成几个部分，每一部分都可以概括出一个小标题，所以先将三个<code>##（二级标题）</code>加上咯～</p>
<ul>
<li><strong>hr</strong></li>
</ul>
<p>最后加上<code>&lt;hr /&gt;</code>作为分隔线，可以将文章内容与它下面的非文章内容分隔开来，感觉美观～</p>
<div class="note primary"><p><b>既然自定义的<code>&lt;p&gt;</code>能替代<code>description</code>，那还有必要用<code>description</code>吗？</b><br><br>“文章的描述”是较短的描述性文字，建议主要还是用<code>description</code>，毕竟 <code>title</code>（标题）、<code>description</code>（描述）和 <code>excerpt</code>（摘要）都是为了将文章内容简要概括，让读者快速了解文章内容，所以更简要的<code>description</code>优先使用，除非你要加 <code>emoji</code> 或者其它样式～</p></div>

<h3 id="使用-Markdown"><a href="#使用-Markdown" class="headerlink" title="使用 Markdown"></a>使用 Markdown</h3><p>用 Hexo 写文章是直接用 Markdown 写的，而不是像 WordPress 有一个类似 Word 一样的文字编辑器，所以第一次用会感觉有点难，但你熟练之后，就会觉得文字编辑器都是辣鸡……</p>
<h4 id="Markdown-简介"><a href="#Markdown-简介" class="headerlink" title="Markdown 简介"></a>Markdown 简介</h4><p>Markdown 的目标是实现「易读易写」。</p>
<p>不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，然而最大灵感来源其实是纯文字的电子邮件格式。</p>
<p>因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像<strong>强调</strong>。Markdown 的清单看起来，嗯，就是清单。假如你有使用过电子邮件，区块引言看起来就真的像是引用一段文字。<sup id="fnref:5"><a href="#fn:5" rel="footnote">5</a></sup></p>
<h4 id="Markdown-教程"><a href="#Markdown-教程" class="headerlink" title="Markdown 教程"></a>Markdown 教程</h4><p>这是写文章必须掌握的技能哦，一开始可能比较懵，因为大脑没有相关概念，无法将 Markdown 语法“翻译”成相应样式，不过多写几篇就好啦speak_no_evil。</p>
<ol>
<li><a href="http://markdown.tw/" rel="external nofollow noopener noreferrer" target="_blank">Markdown 语法说明</a></li>
<li><a href="https://www.ofind.cn/blog/HEXO/HEXO下的Markdown语法(GFM" rel="external nofollow noopener noreferrer" target="_blank">Hexo下的Markdown语法(GFM)写博客</a>写博客.html)</li>
<li><a href="https://kennylee26.gitbooks.io/markdown/content/index.html" rel="external nofollow noopener noreferrer" target="_blank">Markdown 教程</a></li>
</ol>
<h4 id="我个人的总结"><a href="#我个人的总结" class="headerlink" title="我个人的总结"></a>我个人的总结</h4><p>首先是基础但重要：</p>
<ol>
<li>文章内标题请从二级标题（<code>##</code>）开始！</li>
<li>英语单词、数字左右看情况加上空格！</li>
<li>Markdwon 文档写完一段回车后务必再回车一次空一行！</li>
</ol>
<p>然后如果有些用 Markdwon 的语法却达不到预期效果（甚至产生奇怪的 bugs），或者用 Markdwon 的语法无法实现，这时就可以考虑用 HTML 和 CSS。</p>
<ul>
<li>分隔线和空行</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line">/* 分隔线 */</div><div class="line"><span class="tag">&lt;<span class="name">hr</span> /&gt;</span></div><div class="line">/* 注意事<sup id="fnref:6"><a href="#fn:6" rel="footnote">6</a></sup>：在XHTML 中，<span class="tag">&lt;<span class="name">hr</span>&gt;</span> 必须被正确地关闭，比如 <span class="tag">&lt;<span class="name">hr</span> /&gt;</span> */</div><div class="line"></div><div class="line">/* 空行 */</div><div class="line"><span class="tag">&lt;<span class="name">br</span> /&gt;</span></div><div class="line">/* 注意事项同上 */</div></pre></div></div></figure>
<ul>
<li>引用</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">blockquote</span>&gt;</span>引用内容<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></div><div class="line"></div><div class="line">/* 如果上下间距很小，可以像下面这样写 */</div><div class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;<span class="name">blockquote</span>&gt;</span>引用内容<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></div></div></figure>
<ul>
<li>居中和右对齐</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line">/* 居中 */</div><div class="line"><span class="tag">&lt;<span class="name">center</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">center</span>&gt;</span></div><div class="line"></div><div class="line">/* 右对齐 */</div><div class="line"><span class="tag">&lt;<span class="name">p</span> <span class="attr">style</span>=<span class="string">"text-align:right"</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">p</span>&gt;</span></div></pre></div></div></figure>
<ul>
<li>字体大小和颜色</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">font</span> <span class="attr">color</span>=<span class="string">"#xxxxxx"</span> <span class="attr">size</span>=<span class="string">"number"</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">font</span>&gt;</span></div><div class="line">/* 详细请查看 http://www.w3school.com.cn/tags/tag_font.asp */</div></pre></div></div></figure>
<ul>
<li>Todo list</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-check-square"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 已完成<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-square"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 未完成<span class="tag">&lt;/<span class="name">li</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></div></pre></div></div></figure>
<h3 id="如何使用-emoji"><a href="#如何使用-emoji" class="headerlink" title="如何使用 emoji"></a>如何使用 emoji</h3><p>首先安装插件：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-filter-github-emojis --save</div></pre></div></div></figure>
<p>然后在站点配置文件的适当位置中加入：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line"><span class="attr">githubEmojis:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">-  className:</span> <span class="string">github-emoji</span></div><div class="line"><span class="string">+</span>  <span class="attr">idName:</span> <span class="string">github-emoji</span></div><div class="line"><span class="attr">  unicode:</span> <span class="literal">false</span></div><div class="line"><span class="attr">  styles:</span></div><div class="line"><span class="attr">  localEmojis:</span></div></pre></div></div></figure>
<p>没错，加入的是<code>idName</code>这行而非<code>className</code>这行，为什么我要这样写？因为要编辑文件：</p>
<ol>
<li>Ctrl + F 搜索<code>class</code>，全部替换为<code>id</code>。</li>
<li>Ctrl + F 搜索<code>title</code>，更改相关代码，如下：</li>
</ol>
<figure class="highlight js"><figcaption><span class="fileDir">文件位置：~/blog/node_modules/hexo-filter-github-emojis/</span><span class="caption">index</span><span class="suffix">.js</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></div><div class="code"><pre><div class="line">    <span class="keyword">var</span> codepoints = emojis[emojiName].codepoints</div><div class="line">    <span class="keyword">if</span> (options.unicode &amp;&amp; codepoints) &#123;</div><div class="line">      codepoints = codepoints.map(<span class="function"><span class="keyword">function</span> (<span class="params">code</span>) </span>&#123;</div><div class="line">        <span class="keyword">return</span> <span class="string">'&amp;#x'</span> + code + <span class="string">';'</span></div><div class="line">      &#125;).join(<span class="string">''</span>)</div><div class="line"></div><div class="line">      <span class="keyword">return</span> <span class="string">'&lt;span id="'</span> + options.idName + <span class="string">'" '</span> +</div><div class="line">        styles +</div><div class="line">-        <span class="string">' title="'</span> + emojiName +</div><div class="line">-        <span class="string">'" data-src="'</span> + emojis[emojiName].src +</div><div class="line">+        <span class="string">' data-src="'</span> + emojis[emojiName].src +</div><div class="line">        <span class="string">'"&gt;'</span> + codepoints + <span class="string">'&lt;/span&gt;'</span></div><div class="line">    &#125; <span class="keyword">else</span> &#123;</div><div class="line">      <span class="keyword">return</span> <span class="string">'&lt;img id="'</span> + options.idName + <span class="string">'" '</span> +</div><div class="line">        styles +</div><div class="line">-        <span class="string">' title="'</span> + emojiName + <span class="string">'" alt="'</span> + emojiName + <span class="string">'" src="'</span> +</div><div class="line">+        <span class="string">' alt="'</span> + emojiName + <span class="string">'" src="'</span> +</div><div class="line">        emojis[emojiName].src + <span class="string">'" height="20" width="20" /&gt;'</span></div><div class="line">    &#125;</div></pre></div></div></figure>
<p>由于 NexT 主题的相关样式会干扰 emoji 图片的显示效果，所以要在<code>custom.styl</code>中加代码：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div></pre></div><div class="code"><pre><div class="line"><span class="comment">/* 里面的 color 值请改为你博客的！ */</span></div><div class="line">// 自定义emoji样式</div><div class="line"><span class="selector-tag">img</span><span class="selector-id">#github-emoji</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0px</span>;</div><div class="line">    <span class="attribute">display</span>: inline <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">vertical-align</span>: text-bottom;</div><div class="line">    <span class="attribute">border</span>: none;</div><div class="line">    <span class="attribute">cursor</span>: text;</div><div class="line">    <span class="attribute">box-shadow</span>: none;</div><div class="line">&#125;</div><div class="line">// 文章超链接样式（为emoji特设）</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line">// 标签云页面超链接样式（为emoji特设）</div><div class="line"><span class="selector-class">.tag-cloud</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.tag-cloud</span> <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line">// 文章元数据中categories的样式（为emoji特设）</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.categories</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.categories</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(161, 102, 171);</div><div class="line">    <span class="attribute">border-bottom</span>: none;</div><div class="line">    <span class="attribute">text-decoration</span>: underline;</div><div class="line">&#125;</div><div class="line">// tabs标签（为emoji特设）</div><div class="line"><span class="selector-class">.post-body</span> <span class="selector-class">.tabs</span> <span class="selector-tag">ul</span><span class="selector-class">.nav-tabs</span> <span class="selector-tag">li</span><span class="selector-class">.tab</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">text-decoration</span>: none;</div><div class="line">&#125;</div><div class="line">// 图片下方标题设置（为emoji特设）</div><div class="line"><span class="selector-tag">a</span><span class="selector-class">.fancybox</span>&#123;</div><div class="line">    <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line">// 按钮样式（为emoji特设）</div><div class="line"><span class="selector-class">.btn</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#fff</span> <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">text-decoration</span>: none <span class="meta">!important</span>;</div><div class="line">    <span class="attribute">border</span>: <span class="number">2px</span> solid <span class="number">#222</span> <span class="meta">!important</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.btn</span><span class="selector-pseudo">:hover</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#222</span> <span class="meta">!important</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<p>然后直接去 <a href="https://www.webpagefx.com/tools/emoji-cheat-sheet/" rel="external nofollow noopener noreferrer" target="_blank">Emoji Cheat Sheet</a> 点一下自己想要的表情复制，再粘贴到自己的文章中即可～</p>
<p>而且用途不止于 emoji，手机里的各种表情包，传到自己的云存储，然后按照插件 <a href="https://github.com/crimx/hexo-filter-github-emojis" rel="external nofollow noopener noreferrer" target="_blank">README</a> 中的写法：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">"github-emoji"</span> <span class="attr">src</span>=<span class="string">"https://表情包.gif"</span> <span class="attr">height</span>=<span class="string">"30"</span> <span class="attr">width</span>=<span class="string">"30"</span> /&gt;</span></div></pre></div></div></figure>
<p>改下 URL，看情况改下 height 和 width 的值即可啦，GIF也可以哦～</p>
<p>当然，还有萌即正义的<a href="http://www.yanwenzi.com/" rel="external nofollow noopener noreferrer" target="_blank">颜文字</a> (ﾉ*･ω･)ﾉ～</p>
<table>
<thead>
<tr>
<th style="text-align:left">问题</th>
<th style="text-align:left">解答</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">调用的是哪里的 emoji 图片？</td>
<td style="text-align:left">由这个插件的 README 可知，调用 GitHub 的 API，写法也是按照 GitHub 的～</td>
</tr>
<tr>
<td style="text-align:left">为什么要将插件源码里的<code>class</code>改为<code>id</code>？</td>
<td style="text-align:left">按下 F12 可看到，开启 fancyBox 后，NexT 会为默认的图片标签（<code>img</code>）加上一个<code>fancybox</code>的<code>class</code>，里面有一个样式：<code>display: block !important;</code>，因为我们要让 emoji 显示在文字之间（<code>display: inline;</code>），但是由于默认的<code>class</code>已经加了<code>!important</code>，所以必须用样式规则的应用优先权高于<code>class</code>的<code>id</code>。</td>
</tr>
<tr>
<td style="text-align:left">为什么要删除插件源码里的<code>title</code>？</td>
<td style="text-align:left">因为开启 fancyBox 后，NexT 会将图片的<code>title</code>显示在图片下方，显然不满足 emoji 的显示要求。</td>
</tr>
<tr>
<td style="text-align:left">为什么要修改<code>.post-body a</code>的样式？</td>
<td style="text-align:left">因为开启 fancyBox 后，NexT 会将图片标签包裹在一个<code>a</code>标签内，而<code>a</code>标签是有下划线的，emoji 下面竟然有根线？显然不满足要求。</td>
</tr>
<tr>
<td style="text-align:left">加进<code>custom.styl</code>的其它一大堆代码是什么鬼？</td>
<td style="text-align:left">补 bugs……</td>
</tr>
</tbody>
</table>
<h3 id="插入音乐和视频"><a href="#插入音乐和视频" class="headerlink" title="插入音乐和视频"></a>插入音乐和视频</h3><p>音乐的话，网易云音乐的外链很好用，不仅有可以单曲，还能有歌单，有兴趣的自己去<a href="https://music.163.com/" rel="external nofollow noopener noreferrer" target="_blank">网易云音乐</a>找首歌尝试。但是有一些音乐因为版权原因放不了，还有就是不完全支持 https，导致小绿锁不见了。要解决这些缺点，就需要安装插件。</p>
<h4 id="音乐"><a href="#音乐" class="headerlink" title="音乐"></a>音乐</h4><p>可以直接用 HTML 的标签，写法如下：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">src</span>=<span class="string">"https://什么什么什么.mp3"</span> <span class="attr">style</span>=<span class="string">"max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;"</span> <span class="attr">controls</span>=<span class="string">"controls"</span> <span class="attr">loop</span>=<span class="string">"loop"</span> <span class="attr">preload</span>=<span class="string">"meta"</span>&gt;</span>Your browser does not support the audio tag.<span class="tag">&lt;/<span class="name">audio</span>&gt;</span></div></pre></div></div></figure>
<p>用插件，有显示歌词功能，也美观，建议使用这种方法。</p>
<p>首先在<span class="label info">站点</span>文件夹根目录安装插件：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-tag-aplayer --save</div></pre></div></div></figure>
<p>然后文章中的写法：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %&#125;</div></pre></div></div></figure>
<p>效果，在这博客的 <a href="https://reuixiy.github.io/tags/music/" rel="external nofollow noopener noreferrer" target="_blank">music</a> 标签里自己找一篇文章看看。</p>
<p>另外可以支持歌单：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></div><div class="code"><pre><div class="line">&#123;% aplayerlist %&#125;</div><div class="line">&#123;</div><div class="line">    "autoplay": false,</div><div class="line">    "showlrc": 3,</div><div class="line">    "mutex": true,</div><div class="line">    "music": [</div><div class="line">        &#123;</div><div class="line">            "title": "歌曲名",</div><div class="line">            "author": "歌手名",</div><div class="line">            "url": "https://什么什么什么.mp3",</div><div class="line">            "pic": "https://封面图.jpg",</div><div class="line">            "lrc": "https://歌词.lrc"</div><div class="line">        &#125;,</div><div class="line">        &#123;</div><div class="line">            "title": "歌曲名",</div><div class="line">            "author": "歌手名",</div><div class="line">            "url": "https://什么什么什么.mp3",</div><div class="line">            "pic": "https://封面图.jpg",</div><div class="line">            "lrc": "https://歌词.lrc"</div><div class="line">        &#125;</div><div class="line">    ]</div><div class="line">&#125;</div><div class="line">&#123;% endaplayerlist %&#125;</div></pre></div></div></figure>
<p>效果可以见<a href="https://reuixiy.github.io/uncategorized/2010/01/01/test.html" rel="external nofollow noopener noreferrer" target="_blank">这篇</a>，里面的详细参数见 <a href="https://github.com/MoePlayer/hexo-tag-aplayer" rel="external nofollow noopener noreferrer" target="_blank">README</a> 和这插件的“母亲” Aplayer 的<a href="https://aplayer.js.org/" rel="external nofollow noopener noreferrer" target="_blank">官方文档</a>。</p>
<div class="note info"><p>关于 lrc 歌词，可以用工具下载网易云音乐的歌词，另发现暂时不支持offset参数。</p></div>

<p>当然，如果那歌词很操蛋，有错误（比如字母大小写和标点符号乱加）或者时间完全对不上，然后你也和我一样是个完美主义者，那接下来就是令人窒息的操作了，一句一句自己查看修改……</p>
<div class="note primary"><p>什么，你想把网易云的几百首歌手动同步到博客？！慢慢慢，有一种<a href="https://github.com/MoePlayer/hexo-tag-aplayer#meingjs-support-new-in-30" rel="external nofollow noopener noreferrer" target="_blank">非常简单的方法</a>，效果见<a href="https://reuixiy.github.io/about/" rel="external nofollow noopener noreferrer" target="_blank">这里</a>。</p></div>

<h4 id="视频"><a href="#视频" class="headerlink" title="视频"></a>视频</h4><p>可以直接用 HTML 的标签，写法如下：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">poster</span>=<span class="string">"https://封面图.jpg"</span> <span class="attr">src</span>=<span class="string">"https://什么什么什么.mp4"</span> <span class="attr">style</span>=<span class="string">"max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;"</span> <span class="attr">controls</span>=<span class="string">"controls"</span> <span class="attr">loop</span>=<span class="string">"loop"</span> <span class="attr">preload</span>=<span class="string">"meta"</span>&gt;</span>Your browser does not support the video tag.<span class="tag">&lt;/<span class="name">video</span>&gt;</span></div></pre></div></div></figure>
<p>用插件，功能更加强大，比如可以弹幕，非常建议食用。</p>
<p>首先在<span class="label info">站点</span>文件夹根目录安装插件：</p>
<figure class="highlight bash"><figcaption><span class="fileDir">所在目录：~/blog/</span><span class="caption"> </span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">npm install hexo-tag-dplayer --save</div></pre></div></div></figure>
<p>然后文章中的写法：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %&#125;</div></pre></div></div></figure>
<p>要使用弹幕，必须有<code>api</code>和<code>id</code>两项，并且若使用的是官方的 api 地址（即上面的），<code>id</code> 的值不能与<a href="https://api.prprpr.me/dplayer/list" rel="external nofollow noopener noreferrer" target="_blank">这个列表</a>的值一样。id 的值自己随便取，唯一要求就是前面这点。</p>
<p>如果唯一要求难倒了你，可以使用<a href="http://tool.oschina.net/encrypt?type=2" rel="external nofollow noopener noreferrer" target="_blank">这个工具</a>将一段与众不同的文字生成一段看起来毫无意义的哈希值，这样看起来是不是好多了。</p>
<p>效果，在这博客的 <a href="https://reuixiy.github.io/tags/video/" rel="external nofollow noopener noreferrer" target="_blank">video</a> 标签里自己找一篇文章看看。</p>
<div class="note primary"><p>当然，这个插件的功能还有很多，可以去 <a href="https://github.com/MoePlayer/hexo-tag-dplayer" rel="external nofollow noopener noreferrer" target="_blank">README</a> 和这插件的“母亲” Dplayer 的<a href="https://dplayer.js.org/" rel="external nofollow noopener noreferrer" target="_blank">官方文档</a>看看。</p></div>

<h3 id="好玩的写作样式"><a href="#好玩的写作样式" class="headerlink" title="好玩的写作样式"></a>好玩的写作样式</h3><p>用一些特殊的样式，可以增加文章的可读性。不过也不是越多越好，没必要写一篇文章就把下面的样式全部用一遍，这样只会适得其反，从下面的样式中选几个自己觉得比较好的、经常会用的就行。而且写博客重点是文章的文字内容，而不是这些样式，样式只是为了让文章更美观，更适合阅读。这和我们用 Markdown 写文章是一样的道理，用 Markdown 而不是直接写 HTML 代码，就是为了将更多时间花在文字上。</p>
<h4 id="主题自带样式-FontAwesome"><a href="#主题自带样式-FontAwesome" class="headerlink" title="主题自带样式 FontAwesome"></a>主题自带样式 FontAwesome</h4><p>效果：</p>
<ol>
<li><i class="fa fa-pencil"></i> 支持 Markdown<br><em>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。</em></li>
<li><i class="fa fa-cloud-upload"></i> 一键部署<br><em>只需一条指令即可部署到 GitHub Pages，或其他网站。</em></li>
<li><i class="fa fa-cog"></i> 丰富的插件<br><em>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。<sup id="fnref:7"><a href="#fn:7" rel="footnote">7</a></sup></em></li>
</ol>
<p>源码：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line">1. <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-pencil"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 支持 Markdown</div><div class="line"><span class="tag">&lt;<span class="name">i</span>&gt;</span>Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。<span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">2. <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-cloud-upload"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 一件部署</div><div class="line"><span class="tag">&lt;<span class="name">i</span>&gt;</span>只需一条指令即可部署到 GitHub Pages，或其他网站。<span class="tag">&lt;/<span class="name">i</span>&gt;</span></div><div class="line">3. <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-cog"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 丰富的插件</div><div class="line"><span class="tag">&lt;<span class="name">i</span>&gt;</span>Hexo 拥有强大的插件系统，安装插件可以让 Hexo 支持 Jade，CoffeeScript。<span class="tag">&lt;/<span class="name">i</span>&gt;</span></div></pre></div></div></figure>
<p>采用的是 Font Awesome 的图标，下面给出一些简单的使用例子，更多请查看官网的使用示例。</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-pencil"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 铅笔</div><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-cloud-upload"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 上传</div><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-download"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 下载</div></pre></div></div></figure>
<ul>
<li><i class="fa fa-pencil"></i> 铅笔</li>
<li><i class="fa fa-cloud-upload"></i> 上传</li>
<li><i class="fa fa-download"></i> 下载</li>
</ul>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></div><div class="code"><pre><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-download"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 下载</div><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-download fa-lg"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 下载变大 33%</div><div class="line">- <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-download fa-2x"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 下载两倍大</div></pre></div></div></figure>
<ul>
<li><i class="fa fa-download"></i> 下载</li>
<li><i class="fa fa-download fa-lg"></i> 下载变大 33%</li>
<li><i class="fa fa-download fa-2x"></i> 下载两倍大</li>
</ul>
<h4 id="主题自带样式-代码块高亮"><a href="#主题自带样式-代码块高亮" class="headerlink" title="主题自带样式 代码块高亮"></a>主题自带样式 代码块高亮</h4><p>先看效果：</p>
<figure class="highlight java"><figcaption><span class="caption">Java</span><a href="https://highlightjs.org/static/demo/" target="_blank" rel="external nofollow noopener noreferrer">代码来自这里</a></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></div><div class="code"><pre><div class="line"><span class="comment">/**</span></div><div class="line"><span class="comment"> * <span class="doctag">@author</span> John Smith &lt;john.smith@example.com&gt;</span></div><div class="line"><span class="comment">*/</span></div><div class="line"><span class="keyword">package</span> l2f.gameserver.model;</div><div class="line"></div><div class="line"><span class="keyword">public</span> <span class="keyword">abstract</span> <span class="class"><span class="keyword">class</span> <span class="title">L2Char</span> <span class="keyword">extends</span> <span class="title">L2Object</span> </span>&#123;</div><div class="line">  <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">final</span> Short ERROR = <span class="number">0x0001</span>;</div><div class="line"></div><div class="line">  <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">moveTo</span><span class="params">(<span class="keyword">int</span> x, <span class="keyword">int</span> y, <span class="keyword">int</span> z)</span> </span>&#123;</div><div class="line">    _ai = <span class="keyword">null</span>;</div><div class="line">    log(<span class="string">"Should not be called"</span>);</div><div class="line">    <span class="keyword">if</span> (<span class="number">1</span> &gt; <span class="number">5</span>) &#123; <span class="comment">// wtf!?</span></div><div class="line">      <span class="keyword">return</span>;</div><div class="line">    &#125;</div><div class="line">  &#125;</div><div class="line">&#125;</div></pre></div></div></figure>
<p>这里指的是&#x60;&#x60;&#x60;代码块，而不是行内代码块（&#x60;代码&#x60;），它的用法如下：</p>
<blockquote class="question">&#x60;&#x60;&#x60;[language] [title] [url] [link-text]<br><br>代码<br><br>&#x60;&#x60;&#x60;</blockquote>


<ul>
<li>[language] 是代码语言的名称，用来设置代码块颜色高亮，非必须；</li>
<li>[title] 是顶部左边的说明，非必须；</li>
<li>[url] 是顶部右边的超链接地址，非必须；</li>
<li>[link text] 如它的字面意思，超链接的名称，非必须。</li>
</ul>
<p>亲测这 4 项应该是根据空格来分隔，而不是<code>[]</code>，故请不要加<code>[]</code>。除非如果你想写后面两个，但不想写前面两个，那么就必须加<code>[]</code>了，要这样写：<code>[] [] [url] [link text]</code>。</p>
<p>首先关于代码块颜色高亮，高亮的模式可以在<span class="label success">主题配置文件</span>中设置：</p>
<figure class="highlight yml"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Code Highlight theme</span></div><div class="line"><span class="comment"># Available value:</span></div><div class="line"><span class="comment">#    normal | night | night eighties | night blue | night bright</span></div><div class="line"><span class="comment"># https://github.com/chriskempson/tomorrow-theme</span></div><div class="line"></div><div class="line"><span class="attr">highlight_theme:</span> <span class="string">normal</span></div></pre></div></div></figure>
<p>要颜色正确高亮，代码语言的名称肯定要写对，各种支持语言的名称可以查看<a href="https://almostover.ru/2016-07/hexo-highlight-code-styles/" rel="external nofollow noopener noreferrer" target="_blank">这篇文章</a>。当然，如果你和我一样懒，可以在<span class="label info">站点配置</span>文件<span class="label default">_config.yml</span>中设置自动高亮：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line"><span class="attr">highlight:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  line_number:</span> <span class="literal">true</span></div><div class="line"><span class="comment"># 代码自动高亮</span></div><div class="line"><span class="attr">-  auto_detect:</span> <span class="literal">false</span></div><div class="line"><span class="string">+</span>  <span class="attr">auto_detect:</span> <span class="literal">true</span></div></pre></div></div></figure>
<p>咦？发现了什么没有，红色<code>-</code>和绿色<code>+</code>的样式哪来的？哈哈哈，原来这也是一种语言，叫<code>diff</code>，所以你只需在 <code>[language]</code> 这写<code>diff</code>，然后在相应代码前面加上<code>-</code>和<code>+</code>就行了。不过默认的<code>-</code>是绿色，<code>+</code>是红色，与 GitHub 上相反，别扭就自己改成 GitHub 的咯：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line">// 文章```代码块diff样式</div><div class="line"><span class="selector-tag">pre</span> <span class="selector-class">.addition</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#e6ffed</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-tag">pre</span> <span class="selector-class">.deletion</span> &#123;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#ffeef0</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<p>当然，要是你不满意顶部的文字样式，也可以自己在<code>custom.styl</code>自定义：</p>
<figure class="highlight css"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></div><div class="code"><pre><div class="line">// 文章```代码块顶部样式</div><div class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> &#123;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">0em</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0.5em</span>;</div><div class="line">    <span class="attribute">background</span>: <span class="number">#eee</span>;</div><div class="line">    <span class="attribute">border-bottom</span>: <span class="number">1px</span> solid <span class="number">#e9e9e9</span>;</div><div class="line">&#125;</div><div class="line"><span class="selector-class">.highlight</span> <span class="selector-tag">figcaption</span> <span class="selector-tag">a</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="built_in">rgb</span>(80, 115, 184);</div><div class="line">&#125;</div></pre></div></div></figure>
<p>参考了 Hexo 官方文档的<a href="https://hexo.io/zh-cn/docs/tag-plugins.html#代码块" rel="external nofollow noopener noreferrer" target="_blank">标签插件</a>页面，这个页面还有更多的 Hexo 标签插件（Tag Plugins）的用法，请自行查看。</p>
<div class="note primary"><p>关于代码块高亮的高级个性化，请查看大佬的文章——<a href="https://www.ofind.cn/blog/HEXO/HEXO下的语法高亮拓展修改.html" rel="external nofollow noopener noreferrer" target="_blank">HEXO下的语法高亮拓展修改</a>。<br><br>本博客目前使用的就是大佬的配色设置。</p></div>

<h4 id="主题自带样式-文本居中引用"><a href="#主题自带样式-文本居中引用" class="headerlink" title="主题自带样式 文本居中引用"></a>主题自带样式 文本居中引用</h4><p>效果：</p>
<blockquote class="blockquote-center"><p>人生乃是一面镜子，<br>从镜子里认识自己，<br>我要称之为头等大事，<br>也只是我们追求的目的！</p>
</blockquote>
<p>源码：</p>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></div><div class="code"><pre><div class="line">&#123;% cq %&#125;</div><div class="line">人生乃是一面镜子，</div><div class="line">从镜子里认识自己，</div><div class="line">我要称之为头等大事，</div><div class="line">也只是我们追求的目的！</div><div class="line">&#123;% endcq %&#125;</div></pre></div></div></figure>
<p>更多 NexT 主题自带的标签样式，请点击：<a href="http://theme-next.iissnan.com/tag-plugins.html" rel="external nofollow noopener noreferrer" target="_blank">http://theme-next.iissnan.com/tag-plugins.html</a></p>
<h4 id="主题自带样式-note-标签"><a href="#主题自带样式-note-标签" class="headerlink" title="主题自带样式 note 标签"></a>主题自带样式 note 标签</h4><p>在<span class="label success">主题</span>配置文件<code>_config.yml</code>里有一个关于这个的配置，但官方文档没有提供 HTML 的使用方式，个人认为这种方式更简单，也不会产生一些奇怪的显示 bugs……</p>
<div class="note default"><p>default</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note default"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>default<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note primary"><p>primary</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note primary"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>primary<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note success"><p>success</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note success"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>success<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note info"><p>info</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note info"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>info<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note warning"><p>warning</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note warning"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>warning<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note danger"><p>danger</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note danger"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>danger<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<div class="note danger no-icon"><p>danger no-icon</p></div>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"note danger no-icon"</span>&gt;</span><span class="tag">&lt;<span class="name">p</span>&gt;</span>danger no-icon<span class="tag">&lt;/<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></div></div></figure>
<p>首先可以在主题配置文件中需要配置下，贴上我的：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Note tag (bs-callout).</span></div><div class="line"><span class="attr">note:</span></div><div class="line">  <span class="comment"># 风格</span></div><div class="line"><span class="attr">  style:</span> <span class="string">flat</span></div><div class="line">  <span class="comment"># 要不要图标</span></div><div class="line"><span class="attr">  icons:</span> <span class="literal">true</span></div><div class="line">  <span class="comment"># 圆角矩形</span></div><div class="line"><span class="attr">  border_radius:</span> <span class="number">3</span></div><div class="line"><span class="attr">  light_bg_offset:</span></div></pre></div></div></figure>
<p>里面的三种风格长啥样？开启图标长啥样？可以查看<a href="https://github.com/iissnan/hexo-theme-next/pull/1697" rel="external nofollow noopener noreferrer" target="_blank">这个页面</a>，更多的介绍也在这个页面，请自行查看。</p>
<h4 id="主题自带样式-label-标签"><a href="#主题自带样式-label-标签" class="headerlink" title="主题自带样式 label 标签"></a>主题自带样式 label 标签</h4><p>首先可以在<span class="label success">主题配置文件</span>中有配置，需要配置下，贴上我的：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Label tag.</span></div><div class="line"><span class="attr">label:</span> <span class="literal">true</span></div></pre></div></div></figure>
<p>然后效果如下（@ 前面的是<code>label</code>的名字，后面的是要显示的文字）：</p>
<ul>
<li><span class="label default">default</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label default@default %&#125;</div></pre></div></div></figure>
<ul>
<li><span class="label primary">primary</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label primary@primary %&#125;</div></pre></div></div></figure>
<ul>
<li><span class="label success">success</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label success@success %&#125;</div></pre></div></div></figure>
<ul>
<li><span class="label info">info</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label info@info %&#125;</div></pre></div></div></figure>
<ul>
<li><span class="label warning">warning</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label warning@warning %&#125;</div></pre></div></div></figure>
<ul>
<li><span class="label danger">danger</span>
</li>
</ul>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% label danger@danger %&#125;</div></pre></div></div></figure>
<div class="note warning"><p>目前博主发现个 bug，如果把它加在一段文字的段首，则会有点问题，<a href="https://github.com/iissnan/hexo-theme-next/issues/2022" rel="external nofollow noopener noreferrer" target="_blank">issue</a> 页面。</p></div>

<h4 id="主题自带样式-tabs-标签"><a href="#主题自带样式-tabs-标签" class="headerlink" title="主题自带样式 tabs 标签"></a>主题自带样式 tabs 标签</h4><p>名字是不是很耳熟？对，就是浏览器的那个 tab，显示效果嘛，看起来是不是和最近很火的 iPhone X 很像？有个刘海，所以我故意……</p>
<p>效果：</p>
<div class="tabs" id="选项卡"><ul class="nav-tabs"><li class="tab"><a href="#选项卡-1">选项卡 1</a></li><li class="tab active"><a href="#选项卡-2">选项卡 2</a></li><li class="tab"><a href="#选项卡-3">选项卡 3</a></li></ul><div class="tab-content"><div class="tab-pane" id="选项卡-1"><p><strong>这是选项卡 1</strong> 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……</p></div><div class="tab-pane active" id="选项卡-2"><p><strong>这是选项卡 2</strong></p></div><div class="tab-pane" id="选项卡-3"><p><strong>这是选项卡 3</strong> 哇，你找到我了！φ(≧ω≦*)♪～</p></div></div></div>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></div><div class="code"><pre><div class="line">&#123;% tabs 选项卡, 2 %&#125;</div><div class="line">&lt;!-- tab --&gt;</div><div class="line">**这是选项卡 1** 呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈呵呵哈哈哈哈哈哈哈哈……</div><div class="line">&lt;!-- endtab --&gt;</div><div class="line">&lt;!-- tab --&gt;</div><div class="line">**这是选项卡 2**</div><div class="line">&lt;!-- endtab --&gt;</div><div class="line">&lt;!-- tab --&gt;</div><div class="line">**这是选项卡 3** 哇，你找到我了！φ(≧ω≦*)♪～</div><div class="line">&lt;!-- endtab --&gt;</div><div class="line">&#123;% endtabs %&#125;</div></pre></div></div></figure>
<p>首先可以在<span class="label success">主题配置文件</span>中有配置，需要配置下，贴上我的：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Tabs tag.</span></div><div class="line"><span class="attr">tabs:</span></div><div class="line"><span class="attr">  enable:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  transition:</span></div><div class="line"><span class="attr">    tabs:</span> <span class="literal">true</span></div><div class="line"><span class="attr">    labels:</span> <span class="literal">true</span></div><div class="line"><span class="attr">  border_radius:</span> <span class="number">0</span></div></pre></div></div></figure>
<p>然后上面源码中<code>, 2</code>表示一开始在第二个选项卡，非必须，若数值为<code>-1</code>则隐藏选项卡内容。更多用法请查看<a href="https://almostover.ru/2016-01/hexo-theme-next-test/#Tab-tag-test" rel="external nofollow noopener noreferrer" target="_blank">这个页面</a>。</p>
<h4 id="主题自带样式-按钮"><a href="#主题自带样式-按钮" class="headerlink" title="主题自带样式 按钮"></a>主题自带样式 按钮</h4><p>源码：</p>
<figure class="highlight plain"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line">&#123;% btn https://www.baidu.com, 点击下载百度, download fa-lg fa-fw %&#125;</div></pre></div></div></figure>
<p>效果：<a class="btn" href="https://www.baidu.com" rel="external nofollow noopener noreferrer" target="_blank"><i class="fa fa-download fa-lg fa-fw"></i>点击下载百度</a></p>
<p>关于按钮的更多使用可以前往<a href="https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test" rel="external nofollow noopener noreferrer" target="_blank">这个页面</a>查看。</p>
<h4 id="自定义样式-引用"><a href="#自定义样式-引用" class="headerlink" title="自定义样式 引用"></a>自定义样式 引用</h4><div class="note info"><p>首先由于是自定义的样式，故要自己将 CSS 代码加到custom.styl中，下文的自定义样式都是如此。为什么可以自定义呢？如果你是一个和我一样的小白，可以点击这里了解了解 CSS 中id和class的知识。</p></div>

<p>需加入<code>custom.styl</code>的代码：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></div><div class="code"><pre><div class="line">// 自定义的引用样式</div><div class="line"><span class="selector-tag">blockquote</span><span class="selector-class">.question</span> &#123;</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</div><div class="line">    <span class="attribute">border-left</span>: <span class="number">4px</span> solid <span class="built_in">rgb</span>(16, 152, 173);</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(227, 242, 253);</div><div class="line">    <span class="attribute">border-top-right-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">border-bottom-right-radius</span>: <span class="number">3px</span>;</div><div class="line">    <span class="attribute">margin-bottom</span>: <span class="number">20px</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<ul>
<li>文字颜色改<code>color</code>的值</li>
<li>背景色改<code>background-color</code>的值</li>
<li>边框颜色和粗细改<code>border-left</code>的值</li>
</ul>
<p>效果：</p>
<blockquote class="question">内容</blockquote>

<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">blockquote</span> <span class="attr">class</span>=<span class="string">"question"</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></div></pre></div></div></figure>
<h4 id="自定义样式-数字块"><a href="#自定义样式-数字块" class="headerlink" title="自定义样式 数字块"></a>自定义样式 数字块</h4><p>需加入<code>custom.styl</code>的代码：</p>
<figure class="highlight css"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/source/css/_custom/</span><span class="caption">custom</span><span class="suffix">.styl</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></div><div class="code"><pre><div class="line">// 自定义的数字块</div><div class="line"><span class="selector-tag">span</span><span class="selector-id">#inline-toc</span> &#123;</div><div class="line">    <span class="attribute">display</span>: inline-block;</div><div class="line">    <span class="attribute">border-radius</span>: <span class="number">80%</span> <span class="number">100%</span> <span class="number">90%</span> <span class="number">20%</span>;</div><div class="line">    <span class="attribute">background-color</span>: <span class="built_in">rgb</span>(227, 242, 253);</div><div class="line">    <span class="attribute">color</span>: <span class="number">#555</span>;</div><div class="line">    <span class="attribute">padding</span>: <span class="number">0.05em</span> <span class="number">0.4em</span>;</div><div class="line">    <span class="attribute">margin</span>: <span class="number">2px</span> <span class="number">5px</span> <span class="number">2px</span> <span class="number">0px</span>;</div><div class="line">    <span class="attribute">line-height</span>: <span class="number">1.5</span>;</div><div class="line">&#125;</div></pre></div></div></figure>
<p><span id="inline-toc">1.</span>左边是效果。</p>
<p>源码：</p>
<figure class="highlight html"><div class="figcode"><div class="gutter"><pre><div class="line">1</div></pre></div><div class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"inline-toc"</span>&gt;</span>1.<span class="tag">&lt;/<span class="name">span</span>&gt;</span></div></pre></div></div></figure>
<p>参考：<a href="https://qianling.pw/style/#TOC数字块" rel="external nofollow noopener noreferrer" target="_blank">https://qianling.pw/style/#TOC数字块</a></p>
<h2 id="结尾"><a href="#结尾" class="headerlink" title="结尾"></a>结尾</h2><h3 id="移动端顶部菜单"><a href="#移动端顶部菜单" class="headerlink" title="移动端顶部菜单"></a>移动端顶部菜单</h3><p>NexT 主题移动端的顶部菜单个人感觉没啥特色，但自己的能力又还没到自己造轮子的地步，所以求大佬。个人比较喜欢这两个 Hexo 主题的移动端顶部菜单：</p>
<ol>
<li>hexo-theme-tranquilpeak，<a href="https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/2015/05/28/Elements-showcase/" rel="external nofollow noopener noreferrer" target="_blank">demo</a></li>
<li>hexo-theme-yilia，<a href="http://litten.me/2017/07/09/prevent-spiders/" rel="external nofollow noopener noreferrer" target="_blank">demo</a></li>
</ol>
<h3 id="替换-fancyBox"><a href="#替换-fancyBox" class="headerlink" title="替换 fancyBox"></a>替换 fancyBox</h3><p>原因是版本太低，我似乎听到了下面的 fancyBox 在说着：这锅我不背joy！</p>
<p>并且已有大佬提交 Pr，但是目前还未被 Merge，博主跟进中，实在不行手动更新。</p>
<p>博主暂时的解决方法是在主题配置文件中，加上新版本的 CDN 地址：</p>
<figure class="highlight yml"><figcaption><span class="fileDir">文件位置：~/blog/themes/next/</span><span class="caption">_config</span><span class="suffix">.yml</span></figcaption><div class="figcode"><div class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></div><div class="code"><pre><div class="line"><span class="comment"># Internal version: 2.1.5</span></div><div class="line">  <span class="comment"># See: http://fancyapps.com/fancybox/</span></div><div class="line">  <span class="comment"># 自定义 fancybox（暂时）</span></div><div class="line"><span class="attr">  fancybox:</span> <span class="attr">https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js</span></div><div class="line"><span class="attr">  fancybox_css:</span> <span class="attr">https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css</span></div></pre></div></div></figure>
<p>当然这样粗鲁的做法还是有 bugs 的，不过暂时先这样，一起期待被 Merge 吧～</p>
<p>本文转自<a href="https://reuixiy.github.io/technology/computer/computer-aided-art/2017/06/09/hexo-next-optimization.html" rel="external nofollow noopener noreferrer" target="_blank">这里</a></p>
<div id="footnotes"><hr><div id="footnotelist"><ol style="list-style:none; padding-left: 0;"><li id="fn:1"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">1.</span><span style="display: inline-block; vertical-align: top;">参考：<a href="https://github.com/ahonn/hexo-theme-even/issues/69" rel="external nofollow noopener noreferrer" target="_blank">https://github.com/ahonn/hexo-theme-even/issues/69</a></span><a href="#fnref:1" rev="footnote"> ↩</a></li><li id="fn:2"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">2.</span><span style="display: inline-block; vertical-align: top;">来源：<a href="http://lovekernel.com/2017/hexo博客构建笔记/" rel="external nofollow noopener noreferrer" target="_blank">http://lovekernel.com/2017/hexo博客构建笔记/</a></span><a href="#fnref:2" rev="footnote"> ↩</a></li><li id="fn:3"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">3.</span><span style="display: inline-block; vertical-align: top;">参考：<a href="http://lovekernel.com/2017/hexo博客构建笔记/" rel="external nofollow noopener noreferrer" target="_blank">http://lovekernel.com/2017/hexo博客构建笔记/</a></span><a href="#fnref:3" rev="footnote"> ↩</a></li><li id="fn:4"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">4.</span><span style="display: inline-block; vertical-align: top;">参考：<a href="https://leaferx.online/2017/06/16/use-gulp-to-minimize/" rel="external nofollow noopener noreferrer" target="_blank">https://leaferx.online/2017/06/16/use-gulp-to-minimize/</a></span><a href="#fnref:4" rev="footnote"> ↩</a></li><li id="fn:5"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">5.</span><span style="display: inline-block; vertical-align: top;">来源：<a href="http://markdown.tw/" rel="external nofollow noopener noreferrer" target="_blank">http://markdown.tw/</a></span><a href="#fnref:5" rev="footnote"> ↩</a></li><li id="fn:6"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">6.</span><span style="display: inline-block; vertical-align: top;">参考：<a href="http://www.w3school.com.cn/tags/tag_hr.asp" rel="external nofollow noopener noreferrer" target="_blank">http://www.w3school.com.cn/tags/tag_hr.asp</a></span><a href="#fnref:6" rev="footnote"> ↩</a></li><li id="fn:7"><span style="display: inline-block; vertical-align: top; padding-right: 10px;">7.</span><span style="display: inline-block; vertical-align: top;">来源：<a href="http://yangbingdong.com/2017/build-blog-hexo-advanced/" rel="external nofollow noopener noreferrer" target="_blank">http://yangbingdong.com/2017/build-blog-hexo-advanced/</a></span><a href="#fnref:7" rev="footnote"> ↩</a></li></ol></div></div>
      
    </div>

    
      


    

    
    
    
    
    <div>
        
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>
        
    </div>
    
    <div>
          
            
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="/this-blog-hexo-next-githubpages-optimization.html">本博客Hexo NexT GitHubPages优化</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 yszar 的个人博客">yszar</a></p>
  <p><span>发布时间:</span>2018年10月05日 - 03:10</p>
  <p><span>最后更新:</span>2018年11月02日 - 23:11</p>
  <p><span>原始链接:</span><a href="/this-blog-hexo-next-githubpages-optimization.html" title="本博客Hexo NexT GitHubPages优化">https://blog.codenote.pro/this-blog-hexo-next-githubpages-optimization.html</a>
    <span class="copy-path" title="点击复制文章链接"><i class="fas fa-copy" data-clipboard-text="https://blog.codenote.pro/this-blog-hexo-next-githubpages-optimization.html" aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>


          
    </div>

    
      <div>
        <div id="wechat_subscriber" style="display: block; padding: 10px 0; margin: 20px auto; width: 100%; text-align: center">
    <img id="wechat_subscriber_qcode" src="/uploads/wechat-qcode.jpg" alt="yszar wechat" style="width: 200px; max-width: 100%;">
    <div>欢迎您扫一扫上面的微信公众号，订阅我的博客！</div>
</div>

      </div>
    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/uploads/wxfk.png" alt="yszar 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/uploads/zfbfk.png" alt="yszar 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/next/" rel="tag"><i class="fa fa-tag"></i> next</a>
          
            <a href="/tags/优化/" rel="tag"><i class="fa fa-tag"></i> 优化</a>
          
            <a href="/tags/github/" rel="tag"><i class="fa fa-tag"></i> github</a>
          
            <a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a>
          
        </div>
      

      
      
        <div class="post-widgets">
        
          <div class="wp_rating">
          <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完记得五星好评哦亲&lt;)</div>
            <div id="wpac-rating"></div>
          </div>
        

        

        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
            
              
              <a href="/docker-quickly-build-php-nginx-mysql-environment.html" rel="prev" title="docker快速搭建php nginx mysql环境">
                
                <i class="fa fa-chevron-left"></i> docker快速搭建php nginx mysql环境
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
            
              
              <a href="/realize-the-automatic-deployment-of-github-and-server-on-hexo-blog-with-travis.html" rel="next" title="利用Travis实现Hexo博客的github and server自动部署">
                
                利用Travis实现Hexo博客的github and server自动部署 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>


  </div>


          </div>
          

  
       <div id="gitalk-container"></div>
       <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">yszar</p>
              <p class="site-description motion-element" itemprop="description">学无止境！</p>
          </div>

          
            <nav class="site-state motion-element">
              
                <div class="site-state-item site-state-posts">
                
                  <a href="/archives/">
                
                    <span class="site-state-item-count">21</span>
                    <span class="site-state-item-name">日志</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-categories">
                  <a href="/categories/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">5</span>
                    <span class="site-state-item-name">分类</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-tags">
                  <a href="/tags/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">42</span>
                    <span class="site-state-item-name">标签</span>
                  </a>
                </div>
              
            </nav>
          

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
              
                <span class="links-of-author-item">
                  <a href="https://github.com/yszar" target="_blank" title="GitHub" rel="external nofollow noopener noreferrer"><i class="fa fa-fw fa-github"></i>GitHub</a>
                  
                </span>
              
                <span class="links-of-author-item">
                  <a href="mailto:yszar@vip.qq.com" target="_blank" title="E-Mail" rel="external nofollow noopener noreferrer"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  
                </span>
              
            </div>
          

          
          
            <div class="cc-license motion-element" itemprop="license">
              <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" class="cc-opacity" target="_blank" rel="external nofollow noopener noreferrer">
                <img src="/images/cc-by-nc-sa.svg" alt="Creative Commons">
              </a>
            </div>
          

          
          

          
            
          
          
        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#我的本地环境"><span class="nav-number">1.1.</span> <span class="nav-text">我的本地环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#一些定义"><span class="nav-number">1.2.</span> <span class="nav-text">一些定义</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#开始-搭建博客"><span class="nav-number">2.</span> <span class="nav-text">开始 搭建博客</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#在本地安装-Hexo"><span class="nav-number">2.1.</span> <span class="nav-text">在本地安装 Hexo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#部署博客到-GitHub-Pages"><span class="nav-number">2.2.</span> <span class="nav-text">部署博客到 GitHub Pages</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更新提示（可以最后看）"><span class="nav-number">2.3.</span> <span class="nav-text">更新提示（可以最后看）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#其它更新"><span class="nav-number">2.3.1.</span> <span class="nav-text">其它更新</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#更新主题"><span class="nav-number">2.3.2.</span> <span class="nav-text">更新主题</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#优化-基本功能配置"><span class="nav-number">3.</span> <span class="nav-text">优化 基本功能配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#选择主题"><span class="nav-number">3.1.</span> <span class="nav-text">选择主题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#站点配置文件"><span class="nav-number">3.2.</span> <span class="nav-text">站点配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#主题配置文件"><span class="nav-number">3.3.</span> <span class="nav-text">主题配置文件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动态背景"><span class="nav-number">3.4.</span> <span class="nav-text">动态背景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#注脚"><span class="nav-number">3.5.</span> <span class="nav-text">注脚</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#安装"><span class="nav-number">3.5.1.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#用法"><span class="nav-number">3.5.2.</span> <span class="nav-text">用法</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#优化-网页样式布局"><span class="nav-number">4.</span> <span class="nav-text">优化 网页样式布局</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#怎么更改？"><span class="nav-number">4.1.</span> <span class="nav-text">怎么更改？</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#快速由懵逼到熟悉"><span class="nav-number">4.1.1.</span> <span class="nav-text">快速由懵逼到熟悉</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#开始实践"><span class="nav-number">4.1.2.</span> <span class="nav-text">开始实践</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#附上我的-custom-styl"><span class="nav-number">4.1.3.</span> <span class="nav-text">附上我的 custom.styl</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修改字体"><span class="nav-number">4.1.4.</span> <span class="nav-text">修改字体</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#进阶-高级功能配置"><span class="nav-number">5.</span> <span class="nav-text">进阶 高级功能配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#大佬的文章"><span class="nav-number">5.1.</span> <span class="nav-text">大佬的文章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更改上一篇，下一篇的顺序"><span class="nav-number">5.2.</span> <span class="nav-text">更改上一篇，下一篇的顺序</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#移动端显示-back-to-top-按钮和侧栏"><span class="nav-number">5.3.</span> <span class="nav-text">移动端显示 back-to-top 按钮和侧栏</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#博客推广及谷歌搜索优化（必读）"><span class="nav-number">5.4.</span> <span class="nav-text">博客推广及谷歌搜索优化（必读）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#博客推广"><span class="nav-number">5.4.1.</span> <span class="nav-text">博客推广</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#搜索引擎"><span class="nav-number">5.4.2.</span> <span class="nav-text">搜索引擎</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#间接影响"><span class="nav-number">5.4.3.</span> <span class="nav-text">间接影响</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#知识平台"><span class="nav-number">5.4.4.</span> <span class="nav-text">知识平台</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#谷歌分析"><span class="nav-number">5.4.5.</span> <span class="nav-text">谷歌分析</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#时间轴页面的年份分隔"><span class="nav-number">5.5.</span> <span class="nav-text">时间轴页面的年份分隔</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#category"><span class="nav-number">5.5.1.</span> <span class="nav-text">category</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#tag"><span class="nav-number">5.5.2.</span> <span class="nav-text">tag</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#说明"><span class="nav-number">5.5.3.</span> <span class="nav-text">说明</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文章底部加上评分小星星"><span class="nav-number">5.6.</span> <span class="nav-text">文章底部加上评分小星星</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#侧栏加入已运行的时间"><span class="nav-number">5.7.</span> <span class="nav-text">侧栏加入已运行的时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#添加-TopX-页面"><span class="nav-number">5.8.</span> <span class="nav-text">添加 TopX 页面</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#利用-gulp-压缩代码"><span class="nav-number">5.9.</span> <span class="nav-text">利用 gulp 压缩代码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#让页脚的心跳动起来"><span class="nav-number">5.10.</span> <span class="nav-text">让页脚的心跳动起来</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#页脚加上微信二维码"><span class="nav-number">5.11.</span> <span class="nav-text">页脚加上微信二维码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更改标签云（tagcloud）的颜色"><span class="nav-number">5.12.</span> <span class="nav-text">更改标签云（tagcloud）的颜色</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#点击侧栏头像回到博客首页"><span class="nav-number">5.13.</span> <span class="nav-text">点击侧栏头像回到博客首页</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#文章摘要图片"><span class="nav-number">5.14.</span> <span class="nav-text">文章摘要图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#背景图片"><span class="nav-number">5.15.</span> <span class="nav-text">背景图片</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#动态效果"><span class="nav-number">5.16.</span> <span class="nav-text">动态效果</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#相关-热门-推荐文章"><span class="nav-number">5.17.</span> <span class="nav-text">相关/热门/推荐文章</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#MathJax-的静态显示（svg）"><span class="nav-number">5.18.</span> <span class="nav-text">MathJax 的静态显示（svg）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#加速-Hexo-博客"><span class="nav-number">5.19.</span> <span class="nav-text">加速 Hexo 博客</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#萌萌哒十二生肖"><span class="nav-number">5.20.</span> <span class="nav-text">萌萌哒十二生肖</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-gitalk-评论系统"><span class="nav-number">5.21.</span> <span class="nav-text">使用 gitalk 评论系统</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#特性"><span class="nav-number">5.21.1.</span> <span class="nav-text">特性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建github-application"><span class="nav-number">5.21.2.</span> <span class="nav-text">创建github-application</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#安装-1"><span class="nav-number">5.21.3.</span> <span class="nav-text">安装</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#修复-Error-Validation-Failed"><span class="nav-number">5.21.4.</span> <span class="nav-text">修复 Error: Validation Failed</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#进阶-写出优雅文章"><span class="nav-number">6.</span> <span class="nav-text">进阶 写出优雅文章</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#使用-Markdown"><span class="nav-number">6.1.</span> <span class="nav-text">使用 Markdown</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#Markdown-简介"><span class="nav-number">6.1.1.</span> <span class="nav-text">Markdown 简介</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#Markdown-教程"><span class="nav-number">6.1.2.</span> <span class="nav-text">Markdown 教程</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#我个人的总结"><span class="nav-number">6.1.3.</span> <span class="nav-text">我个人的总结</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何使用-emoji"><span class="nav-number">6.2.</span> <span class="nav-text">如何使用 emoji</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#插入音乐和视频"><span class="nav-number">6.3.</span> <span class="nav-text">插入音乐和视频</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#音乐"><span class="nav-number">6.3.1.</span> <span class="nav-text">音乐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#视频"><span class="nav-number">6.3.2.</span> <span class="nav-text">视频</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#好玩的写作样式"><span class="nav-number">6.4.</span> <span class="nav-text">好玩的写作样式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-FontAwesome"><span class="nav-number">6.4.1.</span> <span class="nav-text">主题自带样式 FontAwesome</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-代码块高亮"><span class="nav-number">6.4.2.</span> <span class="nav-text">主题自带样式 代码块高亮</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-文本居中引用"><span class="nav-number">6.4.3.</span> <span class="nav-text">主题自带样式 文本居中引用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-note-标签"><span class="nav-number">6.4.4.</span> <span class="nav-text">主题自带样式 note 标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-label-标签"><span class="nav-number">6.4.5.</span> <span class="nav-text">主题自带样式 label 标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-tabs-标签"><span class="nav-number">6.4.6.</span> <span class="nav-text">主题自带样式 tabs 标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#主题自带样式-按钮"><span class="nav-number">6.4.7.</span> <span class="nav-text">主题自带样式 按钮</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#自定义样式-引用"><span class="nav-number">6.4.8.</span> <span class="nav-text">自定义样式 引用</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#自定义样式-数字块"><span class="nav-number">6.4.9.</span> <span class="nav-text">自定义样式 数字块</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结尾"><span class="nav-number">7.</span> <span class="nav-text">结尾</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#移动端顶部菜单"><span class="nav-number">7.1.</span> <span class="nav-text">移动端顶部菜单</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#替换-fancyBox"><span class="nav-number">7.2.</span> <span class="nav-text">替换 fancyBox</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2018</span>
  
  <span class="with-love" id="heart">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">yszar</span>

  

  
</div>


  










<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共38.6k字</span>
</div>
<div class="post-count">
	<a href="http://www.miitbeian.gov.cn/" rel="external nofollow noopener noreferrer" target="_blank">陇ICP备15003024号</a>
</div>


<div class="weixin-box">
  <div class="weixin-menu">
    <div class="weixin-hover">
      <div class="weixin-description">微信扫一扫，订阅本博客</div>
    </div>
  </div>
</div>
        








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>
    

    
	
    

    
  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>












  















  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.ui.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=6.4.2"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=6.4.2"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=6.4.2"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=6.4.2"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=6.4.2"></script>



  



  










   
     
       <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>

      <script src="/js/src/md5.min.js"></script>

       <script type="text/javascript">
         const gitalk = new Gitalk({
           clientID: '54f26977793794b45255',
           clientSecret: '568cccb3bdde42eca6c05ab0680b4617bbb58c4f',
           repo: 'yszar.github.io',
           owner: 'yszar',
           admin: 'yszar'.split(','),
           id: md5(location.pathname),
           pagerDirection: 'first',
           // facebook-like distraction free mode
           distractionFreeMode: false
         })
         gitalk.render('gitalk-container')
       </script>
     
   
 
  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  
  <script>
    
    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();

      Counter('get', '/classes/Counter', { where: JSON.stringify({ url }) })
        .done(function ({ results }) {
          if (results.length > 0) {
            var counter = results[0];
            
              var $element = $(document.getElementById(url));
              $element.find('.leancloud-visitors-count').text(counter.time + 1);
            
            Counter('put', `/classes/Counter/${counter.objectId}`, JSON.stringify({ time: { "__op":"Increment", "amount":1 } }))
            
            .fail(function ({ responseJSON }) {
                console.log('Failed to save Visitor num, with error message: ' + responseJSON.error);
            })
          } else {
            
              Counter('post', '/classes/Counter', JSON.stringify({ title: title, url: url, time: 1}))
                .done(function () {
                  var $element = $(document.getElementById(url));
                  $element.find('.leancloud-visitors-count').text(1);
                })
                .fail(function () {
                  console.log('Failed to create');
                });
            
          }
        })
      .fail(function ({ responseJSON }) {
        console.log('LeanCloud Counter Error:' + responseJSON.code + " " + responseJSON.error);
      });
    }
    

    $(function() {
      $.get('https://app-router.leancloud.cn/2/route?appId=' + "iUS887d8BnkY3Gqc9FJX70fE-gzGzoHsz")
        .done(function ({ api_server }) {
          var Counter = function (method, url, data) {
            return $.ajax({
              method: method,
              url: `https://${api_server}/1.1${url}`,
              headers: {
                'X-LC-Id': "iUS887d8BnkY3Gqc9FJX70fE-gzGzoHsz",
                'X-LC-Key': "ekF4kKyQDgrDkIBadj3IDrVA",
                'Content-Type': 'application/json',
              },
              data: data,
            });
          };
          
          addCount(Counter);
          
        })
    });
  </script>



  

  

  

  
  
  <script type="text/javascript">
  wpac_init = window.wpac_init || [];
  wpac_init.push({widget: 'Rating', id: 14244,
    el: 'wpac-rating',
    color: 'fc6423'
  });
  (function() {
    if ('WIDGETPACK_LOADED' in window) return;
    WIDGETPACK_LOADED = true;
    var mc = document.createElement('script');
    mc.type = 'text/javascript';
    mc.async = true;
    mc.src = '//embed.widgetpack.com/widget.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
  })();
  </script>


  

  

  

  

  
  <style>
    .copy-btn {
      display: inline-block;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 20px;
      color: #333;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      background-color: #eee;
      background-image: linear-gradient(#fcfcfc, #eee);
      border: 1px solid #d5d5d5;
      border-radius: 3px;
      user-select: none;
      outline: 0;
    }

    .highlight-wrap .copy-btn {
      transition: opacity .3s ease-in-out;
      opacity: 0;
      padding: 2px 6px;
      position: absolute;
      right: 4px;
      top: 8px;
    }

    .highlight-wrap:hover .copy-btn,
    .highlight-wrap .copy-btn:focus {
      opacity: 1
    }

    .highlight-wrap {
      position: relative;
    }
  </style>
  <script>
    $('.highlight').each(function (i, e) {
      var $wrap = $('<div>').addClass('highlight-wrap')
      $(e).after($wrap)
      $wrap.append($('<button>').addClass('copy-btn').append('复制').on('click', function (e) {
        var code = $(this).parent().find('.code').find('.line').map(function (i, e) {
          return $(e).text()
        }).toArray().join('\n')
        var ta = document.createElement('textarea')
        document.body.appendChild(ta)
        ta.style.position = 'absolute'
        ta.style.top = '0px'
        ta.style.left = '0px'
        ta.value = code
        ta.select()
        ta.focus()
        var result = document.execCommand('copy')
        document.body.removeChild(ta)
        
          if(result)$(this).text('复制成功')
          else $(this).text('复制失败')
        
        $(this).blur()
      })).on('mouseleave', function (e) {
        var $b = $(this).find('.copy-btn')
        setTimeout(function () {
          $b.text('复制')
        }, 300)
      }).append(e)
    })
  </script>


  
</body>
</html>
